Two divs on top op each other, together exact height 100% + lower div scrollable

Question

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.

Regarding the scrolling in #lower, change to overflow-y: auto; overflow-x: hidden; — kunalbhat, Aug 18 '13 at 20:18
When you say height should be 100%, are you talking about 100% of the screensize? — kunalbhat, Aug 18 '13 at 20:20
Thank you for your replies kunalbhat; indeed, 100% of screensize. — ravax, Aug 18 '13 at 20:24

John Woodruff · Accepted Answer · 2013-08-21T14:47:46.877

4

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.

edited Aug 21 '13 at 14:47

answered Aug 18 '13 at 20:21

John Woodruff

1,608
16
29

Thank 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. – ravax Aug 18 '13 at 20:32
No, you can use position:relative;. 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. – John Woodruff Aug 19 '13 at 22:57
Thanks a lot, @jbw91! Now it works properly! I just added the # to the $('lower') ;) I accepted your answer. – ravax Aug 21 '13 at 08:58
Oh thanks for pointing that out! Just updated for anyone else. :) – John Woodruff Aug 21 '13 at 14:48

score 3 · Answer 2 · answered Oct 21 '15 at 17:03

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

score 1 · Answer 3 · edited May 23 '17 at 12:33

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

score 0 · Answer 4 · answered Jan 24 '14 at 02:28

Here a 100% css alternative:

<div style="height:100%;">
    main div

    <div style="height:100%;padding-bottom:200px;">
    header div
    </div>

    <div style="position:relative;height:200px;top:-200px;">
    footer div
    </div>

</div>

Remember that all parent elements, including body and html, must have their height set too.

Two divs on top op each other, together exact height 100% + lower div scrollable

4 Answers4