How do I position two divs vertically where the top one takes up the remaining height?
The markup is like: -
<div id="parent">
<div class="top">
<ul>
<li>...
</ul>
</div>
<div class="bottom">
<ul>
<li>Option A
<li>Option B
<li>Option C
</ul>
</div>
</div>
And CSS: -
div {
border: 1px solid black;
}
#parent {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.top {
max-height: 200px;
overflow: scroll;
}
So, basically what I want is to bottom
div
be able to touch the bottom edge of the window and the rest of the space to be taken up top
div
. My current setup approach max-height
is top
div
clearly not a good one, as depending on the screen size (on mobile phones) it will be either too small or too large. Can I achieve this using CSS only?
Here is a jsfiddle for that - http://jsfiddle.net/Ldr07h2r/
source to share
It's pretty simple with Flexbox layout . In this case, you don't need to specify explicit height
for the bottom <div>
, the top will take up the remaining space:
#parent {
/* other declarations... */
display: flex;
min-height: 100vh;
flex-direction: column;
}
.top {
overflow: auto; /* Up to you! */
flex: 1;
}
Take a look at these properties:
source to share
You have to position div.bottom absolute and set the div.top height to 100% - div.bottom.
Your final css should be:
div {
border: 1px solid black;
}
#parent {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.top {
height: calc(100% - 100px);
overflow: scroll;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
Here is the updated fiddle: http://jsfiddle.net/Ldr07h2r/4/
Good luck!
source to share
Here's a little secret: just use a gradient on the parent ...
#parent {background: linear-gradient(to right, rgba(238, 238, 238, 0) calc(100% - 370px), rgba(238, 238, 238, 1) calc(100% - 360px)) repeat scroll 0 0 rgba(0, 0, 0, 0);}
... and you don't have to throw out code for height
related hacks.
source to share