CSS absolute child div overflows relative parent, toggled relative element

Question

In the following example, an absolute child div is contained in a relative parent. The div preceding the parent is shown and hidden conditionally so the parent div should be aligned to the top whether or not the header is displayed.

The problem is when the header is displayed, the contents of the child div are hidden even if you scroll (the bottom of the scroll bar cannot be seen). How can the bottom of the child div be the bottom of the parent div (in this case the browser window)?

html {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  margin: 0;
  height: 100%;
}
#parentDiv 
{ 
  position:relative;
  background: yellow;
  height: 100%;
}
#childDiv 
{ 
  position:absolute; 
  left:50px; 
  top:20px;
  bottom: 0;
  background: blue;
  overflow: auto;
}

<div id='header'>This header causes childDiv to scroll outside of the browser window (bottom scroll thumb isn't visible).
  This toggles so parentDiv should adjust up when not visible.  
</div>
<div>
  <div id='parentDiv'>
    This is the parent div
    <div id='childDiv'>
      This is the child div <br>
      This is the child div <br>
      (Repeat to extend beyond browser window and cause a scroll bar to be displayed)
      ...
      This is the child div <br> 
    </div>
  </div>
</div>

That's because `#parentDiv` height is `100%` but his parent has no height so the height of `#parentDiv` is set only by his content `This is the parent div`. If you will set the `#parentDiv` height of 350px for example, you will see the `#childDiv` content. — Mosh Feu, Jan 03 '16 at 06:12
I misspoke. The contents are not hidden -- just the content that is the size of the header is hidden. How can all of the child div be displayed (or scrolled) without explicitly accounting for the height of the header. The content of the header could vary making the height dynamic. It so can be shown or hidden. — Brandon F, Jan 03 '16 at 07:25

score 0 · Answer 1 · answered Jan 03 '16 at 06:36

Your parentDiv is wrapped in a unnamed div with no height specified. Thus, setting height to 100% doesn't do anything and parentDiv just expands to its content. If you just remove the extra div, then the scroll bar will show up.

However, because parentDiv's height is 100%, the bottom will go beyond the page by whatever the height of the header is. To prevent that from happening, you can specify the header height, and set parentDiv to start after that height. Here is an example:

<html>
<head>
<style type="text/css">
html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
body {
    margin: 0;
    height: 100%;
}
#header {
    height: 10%;
}
#parentDiv 
{ 
    position:absolute;
    width: 100%;
    background: yellow;
    top: 10%;
    bottom: 0;
}
#childDiv 
{ 
    position:absolute; 
    left:50px; 
    top:20px;
    bottom: 0;
    background: blue;
    overflow: auto;
}
</style>
</head>
<body>
<div id='header'>This header causes childDiv to scroll outside of the browser window (bottom scroll thumb isn't visible).
This toggles so parentDiv should adjust up when not visible.  
</div>
<div id='parentDiv'>
    This is the parent div
    <div id='childDiv'>
        This is the child div <br>
        This is the child div <br>
        (Repeat to extend beyond browser window and cause a scroll bar to be displayed)
        ...
        This is the child div <br> 
    </div>
</div>
</body>
</html>

Can you think of a way to avoid setting parent div to start after the preceding element's height? This height could vary based on content. It also could be hidden (i.e. using the jquery toggle method). — Brandon F, Jan 03 '16 at 07:14
Hmm perhaps this might help? http://stackoverflow.com/questions/17590457/two-divs-inside-div-how-to-auto-fill-the-space-of-parent-div-by-second-div — sheep, Jan 03 '16 at 07:36

CSS absolute child div overflows relative parent, toggled relative element

1 Answers1