The answer is
Now we've got CSS grid. Welcome to 2019.
_x000D_
_x000D_
_x000D_
_x000D_
/* Required */_x000D_
body {_x000D_
margin: 0;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
#wrapper {_x000D_
height: 100vh;_x000D_
display: grid;_x000D_
grid-template-rows: 30px 1fr 30px;_x000D_
}_x000D_
_x000D_
#content {_x000D_
overflow-y: scroll;_x000D_
}_x000D_
_x000D_
/* Optional */_x000D_
#wrapper > * {_x000D_
padding: 5px;_x000D_
}_x000D_
_x000D_
#header {_x000D_
background-color: #ff0000ff;_x000D_
}_x000D_
_x000D_
#content {_x000D_
background-color: #00ff00ff;_x000D_
}_x000D_
_x000D_
#footer {_x000D_
background-color: #0000ffff;_x000D_
}<body>_x000D_
<div id="wrapper">_x000D_
<div id="header">Header Content</div>_x000D_
<div id="content">_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._x000D_
</div>_x000D_
<div id="footer">Footer Content</div>_x000D_
</div>_x000D_
</body>If you're targeting browsers supporting flexible boxes you could do the following.. http://jsfiddle.net/meyertee/AH3pE/
HTML
<div class="container">
<header><h1>Header</h1></header>
<div class="body">Body</div>
<footer><h3>Footer</h3></footer>
</div>
CSS
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
header {
flex-shrink: 0;
}
.body{
flex-grow: 1;
overflow: auto;
min-height: 2em;
}
footer{
flex-shrink: 0;
}
Update:
See "Can I use" for browser support of flexible boxes.
Approach 1 - flexbox
It works great for both known and unknown height elements. Make sure to set the outer div to height: 100%; and reset the default margin on body. See the browser support tables.
_x000D_
_x000D_
_x000D_
_x000D_
html, body {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
height: 100%;_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
}_x000D_
.header, .footer {_x000D_
background: silver;_x000D_
}_x000D_
.content {_x000D_
flex: 1;_x000D_
overflow: auto;_x000D_
background: pink;_x000D_
}<div class="wrapper">_x000D_
<div class="header">Header</div>_x000D_
<div class="content">_x000D_
<div style="height:1000px;">Content</div>_x000D_
</div>_x000D_
<div class="footer">Footer</div>_x000D_
</div>Approach 2 - CSS table
For both known and unknown height elements. It also works in legacy browsers including IE8.
_x000D_
_x000D_
_x000D_
_x000D_
html, body {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
display: table;_x000D_
}_x000D_
.header, .content, .footer {_x000D_
display: table-row;_x000D_
}_x000D_
.header, .footer {_x000D_
background: silver;_x000D_
}_x000D_
.inner {_x000D_
display: table-cell;_x000D_
}_x000D_
.content .inner {_x000D_
height: 100%;_x000D_
position: relative;_x000D_
background: pink;_x000D_
}_x000D_
.scrollable {_x000D_
position: absolute;_x000D_
left: 0; right: 0;_x000D_
top: 0; bottom: 0;_x000D_
overflow: auto;_x000D_
}<div class="wrapper">_x000D_
<div class="header">_x000D_
<div class="inner">Header</div>_x000D_
</div>_x000D_
<div class="content">_x000D_
<div class="inner">_x000D_
<div class="scrollable">_x000D_
<div style="height:1000px;">Content</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<div class="footer">_x000D_
<div class="inner">Footer</div>_x000D_
</div>_x000D_
</div>Approach 3 - calc()
If header and footer are fixed height, you can use CSS calc().
_x000D_
_x000D_
_x000D_
_x000D_
html, body {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
height: 100%;_x000D_
}_x000D_
.header, .footer {_x000D_
height: 50px;_x000D_
background: silver;_x000D_
}_x000D_
.content {_x000D_
height: calc(100% - 100px);_x000D_
overflow: auto;_x000D_
background: pink;_x000D_
}<div class="wrapper">_x000D_
<div class="header">Header</div>_x000D_
<div class="content">_x000D_
<div style="height:1000px;">Content</div>_x000D_
</div>_x000D_
<div class="footer">Footer</div>_x000D_
</div>Approach 4 - % for all
If the header and footer are known height, and they are also percentage you can just do the simple math making them together of 100% height.
_x000D_
_x000D_
_x000D_
_x000D_
html, body {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
}_x000D_
.wrapper {_x000D_
height: 100%;_x000D_
}_x000D_
.header, .footer {_x000D_
height: 10%;_x000D_
background: silver;_x000D_
}_x000D_
.content {_x000D_
height: 80%;_x000D_
overflow: auto;_x000D_
background: pink;_x000D_
}<div class="wrapper">_x000D_
<div class="header">Header</div>_x000D_
<div class="content">_x000D_
<div style="height:1000px;">Content</div>_x000D_
</div>_x000D_
<div class="footer">Footer</div>_x000D_
</div>As of 2013: This would be my approach. jsFiddle:
HTML
<header class="container global-header">
<h1>Header (fixed)</h1>
</header>
<div class="container main-content">
<div class="inner-w">
<h1>Main Content</h1>
</div><!-- .inner-w -->
</div> <!-- .main-content -->
<footer class="container global-footer">
<h3>Footer (fixed)</h3>
</footer>
SCSS
// User reset
* { // creates a natural box model layout
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} // asume normalize.css
// structure
.container {
position: relative;
width: 100%;
float: left;
padding: 1em;
}
// type
body {
font-family: arial;
}
.main-content {
h1 {
font-size: 2em;
font-weight: bold;
margin-bottom: .2em;
}
} // .main-content
// style
// variables
$global-header-height: 8em;
$global-footer-height: 6em;
.global-header {
position: fixed;
top: 0; left: 0;
background-color: gray;
height: $global-header-height;
}
.main-content {
background-color: orange;
margin-top: $global-header-height;
margin-bottom: $global-footer-height;
z-index: -1; // so header will be on top
min-height: 50em; // to make it long so you can see the scrolling
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
height: $global-footer-height;
background-color: gray;
}
Here's what worked for me. I had to add a margin-bottom so the footer wouldn't eat up my content:
header {
height: 20px;
background-color: #1d0d0a;
position: fixed;
top: 0;
width: 100%;
overflow: hide;
}
content {
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
footer {
position: fixed;
bottom: 0px;
overflow: hide;
width: 100%;
}
It works fine for me using a CSS grid. Initially fix the container and then give overflow-y: auto; for the centre content which has to get scrolled i.e other than header and footer.
_x000D_
_x000D_
_x000D_
_x000D_
.container{
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
display: grid;
grid-template-rows: 5em auto 3em;
}
header{
grid-row: 1;
background-color: rgb(148, 142, 142);
justify-self: center;
align-self: center;
width: 100%;
}
.body{
grid-row: 2;
overflow-y: auto;
}
footer{
grid-row: 3;
background: rgb(110, 112, 112);
}<div class="container">
<header><h1>Header</h1></header>
<div class="body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<footer><h3>Footer</h3></footer>
</div>Source: Stackoverflow.com