Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Looks like your h2 is pushing the container down. I just remove contentContain because not sure why you need it? Once you place the background inside content div then works fine.</p> <p>HTML:</p> <pre><code>&lt;div id="mainContain"&gt; &lt;div id="header"&gt; &lt;/div&gt;&lt;!-- End of header --&gt; &lt;div id="content"&gt; &lt;h2&gt;Hog&lt;/h2&gt; &lt;h2&gt;Hog&lt;/h2&gt; &lt;h2&gt;Hog&lt;/h2&gt; &lt;/div&gt;&lt;!-- End of content --&gt; &lt;div id="footer"&gt; &lt;/div&gt;&lt;!-- End of footer --&gt; &lt;/div&gt;&lt;!-- End of mainContain --&gt; </code></pre> <p>CSS:</p> <pre><code>html, body { padding: 0; margin: 0; height: 100%; } #mainContain { min-height: 100%; position:relative; } #header { width: 100%; height: 180px; background-color: #111111; } /* #contentContain { background: url('http://baconmockup.com/400/300') no-repeat center 0; padding-bottom: 45px; This value is the height of your footer } */ #content { margin: auto; /* border: thin solid blue; */ background: url('http://baconmockup.com/400/300') no-repeat center 0; padding-bottom: 45px; /* This value is the height of your footer */ } #footer { position: absolute; Width: 100%; bottom: 0; height: 45px; /* This value is the height of your footer */ background-color: #111111; } </code></pre> <p><a href="http://jsfiddle.net/tBeQy/1/" rel="nofollow">jsFiddle example</a></p> <p>UPDATE As Marc Audet pointed out just add</p> <pre><code>overflow:auto; </code></pre> <p><a href="http://jsfiddle.net/tBeQy/2/" rel="nofollow">Update</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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