Need help with height 100% layout

Question

I am trying to build the following layout (file browser type of thing, left block would contain a list of files, right panel would contain selected file content):

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

• The page itself shouldn't have any scrollbars.
• Menu has 100% width and fixed height
• Left block has fixed width and 100% height. If content is taller - scroll bar appears inside the left block only.
• Right block contains <pre> element and takes the remaining width and 100% height. If content is wider or taller - scrollbar appears inside the right block only.

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

The problem is fixed menu height messes up 100% height calculation and all scrollbars inside left and right blocks appear at wrong time.

I don't care about cross browser compatibility, only Chrome matters.

Thanks.

Answer 1

Here is a solution without 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>

Full disclosure: I was actually inspired by JS Bin :)

Answer 2

I was working in something similar right now. You need to use Javascript, take a look at this code:

    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";
    }

That code is for an experiment I'm doing it should be improved to remove that numeric constants but that's the idea.

Answer 3

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

Answer 4

100% height is not something that browsers support very well if at all.

i have always reverted to scripting the calculation ie (psuedo code):

onLoad & onResize
- calc clientHeight
- minus menu height
- apply to left and right block

hope that helps.