Adjust DIV when scrollbar appears

pcarrollnf

04-26-2011, 03:18 PM

I have 3 DIVs in my HTML page. I have a header, content area and a footer. The CSS for the header is the following:

#header
{
position:absolute;
top:0;
left:0;
width:100%;
height:120px;
overflow:auto;
background:#FFFFFF;
}

The CSS for the container div is:

#container
{
position:fixed;
top:121px;
left:0;
bottom:30px;
right:0;
overflow:auto;
background:#FFFFFF;
padding:0px;
text-align:center;
}

And the CSS for the footer is:

#footer
{
position:absolute;
bottom:0;
left:0;
width:100%;
height:30px;
overflow:auto;
text-align:right;
}

When I resize the browser window to make it smaller, eventually horizontal scrollbars appear in the header DIV (the container and footer DIVs will eventually contain horizontal scrollbars if I continue to make the window smaller). The header DIV will also contains very small vertical scrollbars which are barely usable. When the horizontal scrollbars appear in the header, how can I adjust the DIVs so that the header div does not need the vertical scrollbar? It seems that if the header div is given more height and container div is shifted down,there would be no need for the vertical scrollbar. Is there a way of having the browser do this automatically or do I have to detect when the horizontal scrollbar appears and adjust each div accordingly? Thanks.

teedoff

04-26-2011, 03:28 PM

Its your use of positioning, which is not needed at all here. I assume it's a single column layout, since you only mention a header, footer, and container, so have a look at this I worked up quickly. I added a page wrapper in order to center your page in the browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
}
#container {
background-color: #CCC;
}
#header {
background-color: #666;
}
#footer {
background-color: #666;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="container">Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here Content for id "container" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>

pcarrollnf

04-26-2011, 04:35 PM

My container div contains content that should be scrollable vertically. While the user scrolls through the content, I want the header and footer to remain in place. When the user makes the browser window smaller, I want horizontal scrollbars to appear in the header because there are links in the header that the user may need to click on. If those link are no longer on the page because of the resizing of the browser, then scrollbars are the only way to get to those links.

In your example, the content area does not scroll independently of the header and footer.

I attached a couple of screenshots that may help to better visualize what I am trying to do. In the 2nd screenshot I would like for the header div to automatically increase its width so that a vertical scrollbar does not appear. I am fine with the horizontal scrollbar appearing in the header div. At the same time, I would like the container div to adjust its top style attribute so that it does not cut off the header div when it increases its height.

The 1st screen shot is how it appears when all the divs are able to be contained by the browser window horizontally.

http://demo.digitalpaper.com/images/scrollingContentArea.png

http://demo.digitalpaper.com/images/scrollingHeader.png