Databases
StackOverflow2013
Postsdbo
POSet a min-height on content container
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSet a min-height on content container
    text
    copied!<p>I've a case where I don't see the solution. Here is my problem : </p> <p>I've a page with three sections (header, section and footer) footer must flush to the bottom all the time. And the section part should take all available place between header and footer, but must have a min-height that is different according the page (I'll set it manually on CSS).</p> <p>When the min-height is reached, a scroll on the whole page should be available.</p> <p>Here is the sample of code I'm using to set my header, section and footer taking all the available place.</p> <p><strong>CSS</strong></p> <pre><code>body { margin: 0 } header, section, footer { left:0; right:0; overflow: hidden; position: absolute; } header { height: 70px; top: 0; background-color: green; } section { top: 70px; bottom: 195px; background-color: gray; min-height:300px; } article { overflow: hidden; background-color:lightyellow; } .news { position: absolute; bottom: -30px; width: 100%; background-color: lime; } footer { height: 195px; bottom: 0; background-color: pink; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;header&gt; &lt;div class="container"&gt; &lt;h2&gt;My header&lt;/h2&gt; &lt;/div&gt; &lt;/header&gt; &lt;section&gt; &lt;article&gt; &lt;div class="news"&gt; &lt;div class="row-fluid"&gt; &lt;a href="#"&gt;UP&lt;/a&gt; &lt;/div&gt; &lt;div class="row-fluid"&gt; &lt;div class="container"&gt; &lt;div class="span6"&gt;News 1&lt;/div&gt; &lt;div class="span6"&gt;News 2&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/article&gt; &lt;/section&gt; &lt;footer&gt; &lt;div class="container"&gt; My footer &lt;/div&gt; &lt;/footer&gt;​ </code></pre> <p>A jsfiddle is available for the example : <a href="http://jsfiddle.net/Nk6uY/" rel="nofollow">http://jsfiddle.net/Nk6uY/</a></p> <p><strong>Edit</strong></p> <p>How I can add a min-height on my section that when it's reached I get a scroll bar on my windows ?</p> <p><strong>Edit 2</strong></p> <p>I will add more informations about my problem. First, mostly of my content inside the section tag will be set in absolute. and hide somewhat and appear on actions (mostly javascript). For that reason, I know for each section which is the minimal height I need to see all my content if somebody click on the links.</p> <p>For my example, the div news is hidden and when you click it will need at least 360px to be visible. But if my windows is smaller than this I don't have scrolls on the windows and all my content is covered by the footer.</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