How to make bottom half of a page take up remaining height?
Posted
by
RobVious
on Stack Overflow
See other posts from Stack Overflow
or by RobVious
Published on 2013-10-24T21:37:29Z
Indexed on
2013/10/24
21:54 UTC
Read the original article
Hit count: 140
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:
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?
© Stack Overflow or respective owner
