开发者

Restrain div to bottom of browser window

I have a layout like the following:

Restrain div to bottom of browser window

Now what I would like if for the "Content" part to stretch to the bottom of the b开发者_如何学Pythonrowser window, but not any further. Any overflow should by handled by a scrollbar on the "Content" part. I have tried position: fixed, but couldn't quite seem to make it work.

Of course, frames are not an option, but I don't have to please IE6 (yay!).


Here is an example that seems to work - http://jsfiddle.net/JQW2c/3/

<div class="toolbar">Toolbar</div>
<div class="info">info</div>
<div class="contentContainer">
    <div class="tabs">tabs</div>
    <div class="content">content</div>
</div>

body, html
{
   font-family: Arial;
   margin: 0px;
   padding: 0px; 
   height: 100%;
}

div.toolbar
{
   background-color: #EB526C;
   height: 50px;
}
div.tabs
{
   background-color: #75D17B;
   margin-right:100px; 
   height: 30px;  
}
div.info
{
   background-color: #E2F285;
   width: 100px;
   position: absolute;
   top: 50px;
   bottom: 0px;
   right: 0px;
}
div.content
{
   background-color: #7794ED;
   position: absolute;
   top: 80px;
   bottom: 0px;
   left: 0px;
   right: 100px;
   overflow: auto;
}


Give this a go...

`#content {height:100%; overflow:scroll;}`


This might work, but depending on the actual setup you have and/or the interaction, it might not :)

#content { position: absolute; top: toolbarheight + tabsheight; left: 0; right: infocolumnwidth; bottom: 0; overflow: auto;}

You’re most probably going to need to set the top position value with JS.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜