Restrain div to bottom of browser window
I have a layout like the following:
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.
精彩评论