Creating a scrollable area inside a div that fills the parent container? - html

Question

I'm trying to create something like the following:
Inside of a container, I want to have a fixed sized header, and then a scrollable div below it that fills all of the remaining space. I seem to be going about this wrong, as when I try setting the scrollable div's height to 100%, it pops out of the containers body.
Here's what i've come up with so far:
HTML
<div class="container">
<div class="top-part">
Hello!
</div>
<div class="scrollable-bottom">
<h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1
</div>
</div>
CSS
.container {
width: 400px;
height: 400px;
border: 1px solid #cacaca;
}
.top-part {
width: 100%;
height: 70px;
border: 1px solid #cacaca;
}
.scrollable-bottom {
height: 100%;
overflow-y: scroll;
background-color: rgba(255, 255, 247, 0.4);
}
If you checkout the fiddle here, you'll see that the scrollable-bottom shoots outside of the container. I can't figure out why this is..
Doesn't the height property refer to the parent elements height? If so, then why isn't it being constrained?

Answer 1

height: 100%; means 100% of the elements parent height, so if parent height is 400px, child height is going to be 400px as well.
You can get away from calculating sizes of your .scrollable-bottom on your own with use of calc() function. It's supported in modern browsers
You can also get rid of magic numbers by changing box model behavior of .top-part and .scrollable-bottom, setting box-sizing: border-box; for .top-part and .scrollable-bottom
It will change its behavior to contain paddings and borders inside the defined width/height of the box area instead of enlarging it by the padding and border width/height
This way, you no longer need to worry about changing .scrollable-bottom height/width whenever you add or remove padding or border to it or the .top-part
.container {
width: 400px;
height: 400px;
border: 1px solid #cacaca;
}
.top-part,
.scrollable-bottom {
box-sizing: border-box;
}
.top-part {
width: 100%;
height: 70px;
border: 1px solid #cacaca;
}
.scrollable-bottom {
height: calc(100% - 70px); /* parent height - .top-part height */
overflow-y: scroll;
background-color: rgba(255, 255, 247, 0.4);
}
<div class="container">
<div class="top-part">
Hello!
</div>
<div class="scrollable-bottom">
<h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1
</div>
</div>

Answer 2

You're absolutely correct. The 100% height refers to the full height of the container. But also note there is the top bar height that should be calculated here.
Giving it a negative top margin the same amount of the top bar should fix it, but it will hide a partial amount of the bottom content itself, that's why we add a top padding with the same amount of the height.
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 400px;
height: 400px;
border: 1px solid #cacaca;
}
.top-part {
width: 100%;
height: 70px;
border: 1px solid #cacaca;
position: relative;
z-index: 2;
background: white;
}
.scrollable-bottom {
height: 100%;
overflow-y: scroll;
padding-top: 70px;
margin-top: -70px;
background-color: rgba(255, 255, 247, 0.4);
}
<div class="container">
<div class="top-part">
Hello!
</div>
<div class="scrollable-bottom">
<h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1><h1>Content</h1>
</div>
</div>

Answer 3

As your containers height is 400px and 70px height is covered by the header.
Just give max-height:330px to scrollable div. It will solve your problem. Here is the result http://jsfiddle.net/o2307qup/2/
There maybe some paddings, margins and borders that you might be playing with. So change the max-height according to them, if you are not seeing the perfect result. Also read the comment below of #Marc