Just move the content next to the sidebar
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.head {
grid-area: head;
background: tomato;
}
.side {
grid-area: side;
background: purple;
}
.content {
grid-area: content;
background: orange;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-areas:
"head head head"
"side content content"
}
.box {
padding: 20px;
height: 100px;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="box head">
</div>
<div class="box side">
</div>
<div class="box content">
</div>
</div>
<!-- end snippet -->
Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:
<!-- begin snippet: js hide: false -->
<!-- language: lang-css -->
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#content {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #F63;
overflow: auto;
}
<!-- language: lang-html -->
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<!-- end snippet -->
Use "Full page" option to view the snippet properly.
