Databases
StackOverflow2013
Postsdbo
PODiv won't stretch the full height of the page (yup, I've Googled plenty)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv won't stretch the full height of the page (yup, I've Googled plenty)
    text
    copied!<p>I'm trying to stretch the content of a div the height of the page. I've Googled the problem and so far nothing works. The whole thing is starting to give me a headache. Perhaps someone more experienced could take a look at my code? The full stylesheet is >400 lines, so I'm including what is (hopefully) relevant.</p> <p>"Wrapper" takes up 100% of the page height, whereas "contentShadow" stretches only to the height of the text in the div "content".</p> <p>Edit: as far as I can tell, every container has its height set to 100%, which whould make "contentShadow" 100% as well. Right...?</p> <p>Edit 2: <strong>I'm starting to see the problem, but don't know how to solve it</strong>. While the following code will keep the footer down, it also means that since .wrapper doesn't have height:100%, "contentShadow" will not stretch. The question then is how I keep my footer down while changing this code:</p> <pre><code>.wrapper { min-height: 100%; height: auto !important; margin: 0 auto -37px; </code></pre> <p>}</p> <p>To this:</p> <pre><code>.wrapper { height: 100%; </code></pre> <p>}</p> <hr> <p>Basic structure of the page:</p> <pre><code>&lt;div id="body"&gt; &lt;div id="headerWrapper"&gt;&lt;/div&gt; &lt;div id="wrapper"&gt; &lt;div id="contentShadow"&gt; &lt;div id="#contentWrapper"&gt; &lt;div id="content"&gt; &lt;!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="push"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; </code></pre> <p></p> <p>Css rules relevant to these divs:</p> <pre><code>html, body { height: 100%; } #headerWrapper { height: 314px; width: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -37px; } #contentShadow { min-height: 100%; width: 994px; background-image: url(../images/contentShadow.png); background-repeat: repeat-y; margin-right: auto; margin-left: auto; } #contentWrapper { min-height: 100%; width: 940px; margin-right: auto; margin-left: auto; padding-right: 16px; padding-bottom: 16px; padding-left: 16px; padding-top: 17px; background-color: #EDECEC; overflow: hidden; } #content { min-height: 100%; } .footer, .push, { height: 37px; } .footer { background: white; clear: both; height: 37px; } </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