Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The main idea behind sticky footer is that you make the content above the footer take up 100% of the viewport height.</p> <p>The wrap then is forced to have a min-height of 100%, but also allows it to be taller than the height of the viewport if the content is longer than the size of the viewport.</p> <p>The real trick is that at the bottom of the main div, you put padding that takes up the same amount of space as the footer's height. Then you set a <em>negative</em> top-margin on the footer to pull the div up into that space.</p> <p><a href="http://jsfiddle.net/6L4hE/" rel="nofollow noreferrer">http://jsfiddle.net/6L4hE/</a></p> <p><img src="https://i.stack.imgur.com/oG9r8.png" alt="enter image description here"></p> <hr> <h3>HTML</h3> <pre><code>&lt;div id="wrap"&gt; &lt;div id="main"&gt; &lt;p&gt;Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; </code></pre> <h3>CSS</h3> <pre><code>/* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; padding-bottom: 180px;} /* must be same height as the footer */ #footer {background-color: cornflowerblue; position: relative; margin-top: -180px; /* negative value of footer height */ height: 180px; clear:both;} /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/ } </code></pre>
 

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