I'm trying to put together a simple 3 row layout in CSS. It needs:
- A main container div (100% width, 100% height) which holds...
- A sticky header (fixed height of 48px)
- A middle section that fills all remaining space in-between the header and footer
- A sticky footer (initial height of 62px, but can change after page-load via javascript)
Here's what I've got so far:
HTML
<body>
<div id="container">
<div id="headContainer">
...
</div>
<div id="bodyContainer">
Stuff goes here
</div>
<div id="footContainer">
...
</div>
</div>
</body>
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color:#2c3e50;
}
div#container {
height:100%;
width:100%;
}
div#headContainer {
background-color:#e74c3c;
height:48px;
width:100%;
z-index:1;
}
div#bodyContainer {
overflow:auto;
width:100%;
top:48px;
position:absolute;
background-color:#FFFFFF;
}
div#footContainer {
background-color:#c0392b;
width:100%;
position:absolute;
bottom:0;
padding:11px 18px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
I'm struggling to work out how I get the 'bodyContainer' to fill the available space between the header and footer. If the footer was a fixed size, this would be a lot easier!
Any tips?
See Question&Answers more detail:os
