Fixed header, fixed footer dynamic content - html

Question

I'm struggling with my dynamic content. So let me explain in a picture:
So my html looks like:
<div id="header"> ... </div>
<div id="container">
<div class="block"> ... </div>
<div class="block"> ... </div>
<div class="block"> ... </div>
<div class="block"> ... </div>
</div>
<div id="footer"> ... </div>
My question: How can I get my container be fluid and the header and footer be fixed? The blocks in the container are set on 50% height and width, so only the container has to be the 100% height (- the fixed header and footer).

Answer 1

You can do this with box-sizing property.
Like so:
FIDDLE
(the example I use here assumes a header of 64px height and footer of 30px height)
Markup
<header>header</header>
<div class="container">
<div id="content">
<div class="block">block1</div><!--
--><div class="block">block2</div><!--
--><div class="block">block3</div><!--
--><div class="block">block4</div>
</div>
</div>
<footer>footer</footer>
CSS
html,body
{
height: 100%;
}
header,footer,div
{
width: 100%;
}
.container
{
height: 100%;
background: pink;
margin: -64px 0 -30px;
padding: 64px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
overflow:auto;
height:100%;
}
.block
{
width: 50%;
height: 50%;
display: inline-block;
border: 1px solid yellow;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 30px;
background: gray;
position: relative;
z-index:1;
}

Answer 2

Like this
working demo
css
*{
margin:0;
padding:0;
}
#header{
height:100px;
background-color:red;
position:fixed;
top:0;
width:100%;
}
#footer{
height:100px;
background-color:green;
position:fixed;
bottom:0;
width:100%;
}
#container{
background-color:#F7F7F7;
width:100%;
top:100px;
position:relative;
}
.block{
width:50%;
background-color:gray;
float:left;
}

Answer 3

Use float to make it fluid desgins.Be Caution about width part when border or padding is added. Because those are calculated with width. As Danield mentioned you can use Box sizing
Obviously Measurements should be in percentage to make it responsive Or alternatively you can write media queries.

Answer 4

You tagged your question with twitter-bootstrap. Here is a more Bootstrap friendly approach:
Demo: http://bootply.com/render/88297
Code: http://bootply.com/88297
This uses a somewhat standard BS header/nav and fixed footer. Then the center container uses table,table-row and table-cell to size the center boxes accordingly at 50/50.
.center-container {
height:100%;
display: table;
width:100%;
margin:0;
}
.center-row {
height:50%;
width:100%;
display: table-row;
}
.center-row > div {
height:100%;
width:50%;
display: table-cell;
border:1px solid #eee
}