Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.</p> <pre><code>* {margin:0px;padding:0px;overflow:hidden} div {position:absolute} div#header {top:0px;left:0px;right:0px;height:60px} div#wrapper {top:60px;left:0px;right:0px;bottom:0px;} div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto} div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto} </code></pre> <p>"overflow-y" is not w3c-approved, but every major browser supports it. Your two divs #left and #right will display a vertical scrollbar if their content is too high.</p> <p>For this to work under IE7, you have to trigger the standards-compliant mode by adding a DOCTYPE : </p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{margin:0px;padding:0px;overflow:hidden} div{position:absolute} div#header{top:0px;left:0px;right:0px;height:60px} div#wrapper{top:60px;left:0px;right:0px;bottom:0px;} div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto} div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt;&lt;/div&gt; &lt;div id="wrapper"&gt; &lt;div id="left"&gt;&lt;div style="height:1000px"&gt;high content&lt;/div&gt;&lt;/div&gt; &lt;div id="right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</code></pre> </div> </div> </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.
    3. 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