Need help with 100% layout height

Question

I am trying to create the following layout (browser file type, the left block will contain a list of files, the right panel will contain the selected file contents):

<------------- MENU ------------------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->

• There should be no scroll bars on the page itself.
• The menu has 100% width and a fixed height.
• The left block has a fixed width and height of 100%. If the content is higher, the scroll bar appears only inside the left block.
• The right block contains the element <pre>and occupies the remaining width and height of 100%. If the content is wider or higher, the scroll bar appears only in the right block.

This is what I still have : http://jsbin.com/uqegi4/3/edit

, 100% , .

, Chrome .

.

Answer 1

JS.

<style>

     body, html, div{
       margin: 0;
       padding: 0;
     }

    .stretch{
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
    }
     #container{
        background: #DDD;
        overflow: hidden;
     }
     #menu{
        background: #FF0000;
        width: 100%;
        height: 50px;
     }
     #content{
        top: 50px;
        width: 100%;
        background: #AAA;
     }
     #left{
       background: #00FF00;
       width: 20%;
       overflow: auto;
     }
        #left-content{
          background: rgba(0,0,0,0.4);
          /* Play with the height to see the scrollbar appear */
          height: 500px;
        }
     #right{
       background: #0000FF;
       width: 80%;
       left: 20%;
       overflow: auto;
     }
        #right-content{
          background: rgba(0,0,0,0.4);
          /* Play with height and width to see the scrollbars appear */
          height: 1000px;
          width: 3000px;
        }
</style>

<div id="container" class="stretch">
  <div id="menu">Menu</div>
  <div id="content" class="stretch">
    <div id="left" class="stretch">
      <div id="left-content">Left</div>
    </div>
    <div id="right" class="stretch">
      <div id="right-content">Right</div>
    </div>
  </div>
</div>

: JS Bin:)

Answer 2

100% , , .

i ie ( psuedo):

onLoad onResize
 - calc clientHeight
 -
 -

, .

Answer 3

- . Javascript, :

    window.onresize = function(event) { resize(); }

    function resize()
    {
        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;

        var sidebar = document.getElementById("sidebar");
        var mainArea = document.getElementById("mainArea");
        sidebar.style.height = (windowHeight - 51) + "px";
        mainArea.style.height = (windowHeight - 51) + "px";
        mainArea.style.width = (windowWidth - 220 - 30) + "px";
    }

, , , , .

Answer 4

You need to add: body {height: 100%;} to your CSS. See http://www.webmasterworld.com/forum83/200.htm