Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Divs stack up automatically so all you have to do is hand them a height and you should be all set. Try this:</p> <p><strong>HTML</strong></p> <pre><code>&lt;div class="container"&gt; &lt;div class="twenty"&gt; fixed height 20 &lt;/div&gt; &lt;div class="fifty"&gt; fixed height 50 &lt;/div&gt; &lt;div class="hundred"&gt; fixed height 100 &lt;/div&gt; &lt;div class="auto"&gt; &lt;div class="content"&gt; .... &lt;/div&gt; &lt;/div&gt; &lt;div class="fifty" style="border-bottom:none; border-top:1px solid"&gt; fixed height 50 &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>html,body { height:100%; margin:0; padding:0; overflow:hidden; } .container { width:100%; height:100%; } .twenty, .fifty, .hundred, .auto { border-bottom:1px solid black; } .twenty { height:20px; } .fifty { height:50px; } .hundred { height:100px; } .auto { height:100%; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; margin:-120px 0; padding:120px 0; } .content { float:left; overflow:auto; height:100%; } .content{ width:100%; } </code></pre> <hr> <p><strong>EDIT</strong> Updated answer for future reference. Now the container completely fills the width and height of the document and just scrolls the scrollable portion of the page while keeping the sections that OP wanted available.</p> <p>Full view: <a href="http://jsfiddle.net/8abeU/show/" rel="nofollow">http://jsfiddle.net/8abeU/show/</a> Fiddle: <a href="http://jsfiddle.net/8abeU" rel="nofollow">http://jsfiddle.net/8abeU</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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      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