CODEWITHSUNDEEP
css
RobVious
RobVious

Reputation: 12925

How to make bottom half of a page take up remaining height?

I've searched and tried a bunch of different things. I have a variable-height tophalf, and the bottom half should fill up the remaining space. A JSfiddle:

http://jsfiddle.net/UCJmQ/

CSS: 

.top {
    background-color: lightblue;
    height: 300px;
}
.bottom {
    background-color: green;
    min-height: 100px;
    overflow: hidden;
    height: 100%;
}

html, body {
    height: 100%;
}

HTML: 

<div class="top"></div>
<div class="bottom">

</div>

What I'm seeing now is the green page taking up the entire window's height, not the remaining height. How can I make it take the remaining height instead?

Upvotes: 2

Views: 1890

Answers (2)

Michał Rybak
Michał Rybak

Reputation: 8706

Is that variable-height specified in CSS or not?

From the fiddle I assume it is. If that's the case, try position: absolute with left, bottom, right set to 0 and top to upper div height:

DEMO

Upvotes: 0

Evgeny
Evgeny

Reputation: 6290

http://jsfiddle.net/ph35V/

<div class="wrapper">
    <div class="top">
        300px
    </div>
    <div class="bottom">
        Remaining height
    </div>
</div>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
}
.top {
    display: table-row;
    background: lightblue;
    height: 300px;
}
.bottom {
    display: table-row;
    height: 100%;
    background: green;
}

Could also use box-sizing: border-box or conflicting absolute positions

Upvotes: 3

Related Questions