PDA

View Full Version : Div with overflow filling te rest of the page.



dust555
Mar 18th, 2010, 05:03 PM
Hi,

What I want to do is creating a div inside a table that fills the rest of the available browser space. However, the div can contain large content so the div must be able to scroll (only the div, not the whole page).

The problem that i get is when te content is very large, the scrollbar comes on the browser, not on the div.

This is the code i have:

html:


<table class="layout_wrapper">
<tr>
<td class="layout_left">

</td>
<td class="layout_content">
<div class="content">
some large text
</div>
</td>
</tr>
</table>


css:



table.layout_wrapper{
width: 100%;
height:100%;
}

td.layout_left{
width: 150px;
}

div.content{
overflow: auto;
height: 100%;
width: 100%;
}

BubikolRamios
Mar 18th, 2010, 07:59 PM
What you want, can't be done.

forinstance:
if jou have last TD at the bottom of page, where do you want to extend the inner div.
Down I belive(cant be extended up without extra fuss), and if so the page will vericaly extend allso, otherwise user would not see the thing.

In general I suggest you to forget idea to limit vertical browser space to screen size. It requires js and even that does not work 100%.

You could use IFRAME, which is very handy, but that allso in long run proves to be bad idea.