CODEWITHSUNDEEP
csshtml
ManiSto
ManiSto

Reputation: 658

Restrain div to bottom of browser window

I have a layout like the following:

enter image description here

Now what I would like if for the "Content" part to stretch to the bottom of the browser 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!).

Upvotes: 2

Views: 571

Answers (3)

Amit
Amit

Reputation: 1184

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

Upvotes: 2

margusholland
margusholland

Reputation: 3348

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.

Upvotes: 0

Graeme Leighfield
Graeme Leighfield

Reputation: 2985

Give this a go...

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

Upvotes: 0

Related Questions