Solution: #1: css tables:
html, body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
#top, #bottom {
width: 100%;
background: yellow;
display: table-row;
}
#top {
height: 50px;
}
#bottom {
background: lightgrey;
height: 100%;
}
html, body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
#top, #bottom {
width: 100%;
background: yellow;
display: table-row;
}
#top {
height: 50px;
}
#bottom {
background: lightgrey;
height: 100%;
}<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>Codepen #1 (little content)
Codepen #2 (lots of content)
Solution #2: Using calc and viewport units
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
min-height: calc(100vh - 50px);
}
body {
margin: 0;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
min-height: calc(100vh - 50px);
}
Where `min-height: calc(100vh - 50px);` means:
'Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.'<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>Codepen #1 (little content)
Codepen #2 (lots of content)
Solution #3 – Flexbox
body {
margin: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
flex: 1;
}
body {
margin: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
flex: 1;
}<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>Codepen #1 – little content
Codepen #2 – lots of content