Two divs on top op each other, together exact height 100% + lower div scrollable
Solution 1
You should set your html
and body
elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
Solution 2
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
Solution 3
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
ravax
Updated on July 25, 2022Comments
-
ravax almost 2 years
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
- The (#upper) div's content automatically determines its height.
- The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body { margin:0; padding:0; } #container { position: relative; width: 500px; height: 100%; max-height: 100%; background-color: #f00; } #upper { width: 100%; background-color: #0f0; } #lower { width: 100%; background-color: #00f; overflow: auto; }
... as well as this code:
<div id="container"> <div id="upper"></div> <div id="lower"></div> </div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
-
ravax almost 11 yearsThank you for your reply, @jbw91. Is there a reason why I cannot use the "position: relative" for #container? I can't use a fixed height for the #lower div: the #upper div's content determines its height en the #lower div must connect. In other words, the #lower div should fill the space between the #upper div and the screen bottom.
-
John Woodruff almost 11 yearsNo, you can use <code>position:relative;</code>. I forgot to include that. :) As for your question about the lower div filling the rest of the screen's height, I mis-read your question. I've updated my answer to include a way to do that.
-
ravax almost 11 yearsThanks a lot, @jbw91! Now it works properly! I just added the # to the $('lower') ;) I accepted your answer.
-
John Woodruff almost 11 yearsOh thanks for pointing that out! Just updated for anyone else. :)