Div填充剩余高度

Question

I have two div s, the one on the bottom has content that expands the highest. The page is 100% height/width position absolute

<style>
    body, html { height:100%, width:100% }
    .page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0}
    .bottom { position absolute; bottom: 0; right: 0; left: 0; }
    .top { position absolute; bottom: 0; right: 0; left: 0; }
</style>

How can i make it so the top div convers whatever page the bottom div is left, so if the window is 600 height, bottom takes 400 , top takes 200

Answer 1

If you want to use pure CSS is there any reason to have a top div?

Check This JSFiddle Demo

In this demo you can see that without a top div, you can stick a div in bottom and the parent div fill the remain space.

HTML:

<div class="page">
    this is top
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

CSS:

body, html { height:100%, width:100% }
.page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0; background-color:green}
.bottom { position: absolute; bottom: 0; right: 0; left: 0; background-color:red}

Update:

But if you have to create a top div that fill remain height, it think there is no a cross-browsing solution using pure CSS but you can user a simple JQuery code.

Assume you have this HTML:

<div class="page">
    <div class="top">
        this is top
    </div>
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

So use this JS:

function setHeight() {
    $(".top").height($(".page").height() - $(".bottom").height());
}

$(document).ready(setHeight);
$(window).resize(setHeight);

Check JSFiddle Demo