CSS: Fluid layout - footer always at the bottom, and a fluid center -

How you can do this:

with a liquid center (vertical height 100%) Excluding ?

I will use a display: table; Layout for the body or cover, and by centering the middle row to a hundred percent.

Like it .-

  & lt; Body & gt; & Lt; Div & gt; & Lt; Div id = head "& gt; head & lt; / div & gt; & lt; / div & gt; & lt; div & gt; & lt; div id = body" & gt; Body & lt; / Div & gt; & Lt; / Div & gt; & Lt; 
 & gt; div id = "foot" & gt; foot  gt; & gt; & gt; & gt; & gt; & lt; / body & gt;  

  html, body {height: 100%}} body {width: 100%; display: table;} body & gt; div {display: table-row} with the following CSS ;} Body & gt; div & gt; Div {display: table-cell;} #body {height: 100%;}