Databases
StackOverflow2013
Postsdbo
PO3 column css layout with sticky footer - columns 100% height?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO3 column css layout with sticky footer - columns 100% height?
    text
    copied!<p>With combining two examples I've found:</p> <p><a href="http://alistapart.com/article/holygrail" rel="nofollow noreferrer">http://alistapart.com/article/holygrail</a> </p> <p><a href="http://mystrd.at/modern-clean-css-sticky-footer/" rel="nofollow noreferrer">http://mystrd.at/modern-clean-css-sticky-footer/</a></p> <p>I have come up with this layout.</p> <p><a href="http://jsfiddle.net/xVuh5/" rel="nofollow noreferrer">http://jsfiddle.net/xVuh5/</a></p> <p>And it is great but I would like to have the 3 columns 100% height.</p> <p>Can anyone help please?</p> <p>Thank you</p> <p>Body of the html and css script as asked by the SO editor validation for including jsfiddle in the text:</p> <p></p> <pre><code>&lt;div id="header"&gt;This is the header.&lt;/div&gt; &lt;div id="container"&gt; &lt;div id="center" class="column"&gt; &lt;h1&gt;This is the main content.&lt;/h1&gt; &lt;p&gt;Text Text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt;This is the footer.&lt;/div&gt; </code></pre> <p></p> <pre><code> /*** The Essential Code ***/ * /* For CSS Reset */ { padding: 0; margin: 0; } html { position: relative; min-height: 100%; } body { min-width: 630px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */ margin: 0 0 100px; /* bottom = footer height */ } html, body { height: 100%; width: 100%; } #container { padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ } #container .column { position: relative; float: left; } #center { padding: 10px 20px; /* CC padding */ width: 100%; } #left { width: 180px; /* LC width */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -100%; } #right { width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -100%; } #footer { clear: both; position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; } /*** IE Fix ***/ * html #left { left: 150px; /* RC fullwidth */ } /*** Just for Looks ***/ body { margin: 0; padding: 0; background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } #container .column { padding-top: 1em; text-align: justify; } </code></pre> <p>As I see the first answers coming in are missing the point of my question, I am adding this image to make the question clearer. </p> <p><img src="https://i.stack.imgur.com/oVCk4.jpg" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload