<div class="header">
header
</div>
<div class="content">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
<div class="footer">
footer
</div>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background: green;
padding: 20px;
}
.content {
background: yellow;
flex: 1;
padding: 20px;
overflow: auto;
}
.footer {
background: #ddd;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.