Fill out remaining div-height using only CSS
I have two div:s in a container.
The first div should have auto height, taking whatever space is required.
The second div should have the remaining height of the container.
I wish to do this without using Javascript.
Isn't there any CSS-only solution? Maybe by utilizing display:table/display:table-cell or display:flex?
Non-working example
<!DOCTYPE html>
<html>
<head>
<title>Stretch</title>
<style type="text/css">
html { height: 100%; }
body {
padding: 0 0;
margin: 0 0;
height: 100%;
background: grey;
}
#container { background: pink; }
#autoHeight { background: blue; }
#remainingHeight { background: green; }
</style>
</head>
<body>
<div id="container">
<div id="autoHeight">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</div>
<div id="remainingHeight">This div should fill out the rest, making the display
mainly green. And no, I don't mean to just have green background. It will
contain other things.</div>
</div>
</body>
</html>
Answer
I could achieve this using display:table and display:table-row (does not work with IE7 or older).
http://cssdeck.com/labs/elars8pj
html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
background:grey;
}
#container {
display:table;
height:100%;
width:100%;
background:pink;
}
#autoHeight {
display:table-row;
background:blue;
}
#remainingHeight {
display:table-row;
height:100%;
background:green;
}