Forum Moderators: open
I need to find a way where I can get the user's browser's resolution and then use that info to set the height of the content div so that if the content overflows it will add scrollbars. The main requirement of the project is that the headercontrol and footercontrol stay fixed..i.e. for them not to disappear when the content exceeds the height and the user scrolls up or down the content area. if anyone can help I would really appreciate it. Thanks
Handling divs is one thing, handling them in the .net development environment is a level of difficulty above that.
If it was me I would write the height element of the content div directly into the page using document.write - there is a way of allowing the div to have a scrollbar but I can't remember it offhand.
If the footer and header controls are fixed height divs? then I think it can be done with CSS and absolute positioning (and IE expressions)...
>> Ian said .NET is not very div friendly so if this sounds a no go then say so, because Javascript may be your answer..
for CSS: is the basic structure top(header), middle(content) and bottom(footer) divs, and how crossbrowser friendly does it need to be?
Suzy
suzy, it's an application to manage post-secondary schools so it will be in somewhat of a controlled environment; no need to worry about outdated browsers.
I would have liked to have done the whole layout using CSS, but I came into the project just a couple of months ago and the project has been in development for about a year and a half. Most of the Developers used tables for their layout with sporadic use of style sheets
>>no need to worry about outdated browsers..
>>CSS solution
try this, I've used the body as the container, but you can relatively position any container(element) for the same effect. (this is NOT IE/Mac suitable yet..)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: center;
overflow: hidden; /* remove ie's main scrollbar */
}#header {
height: 50px;
background: #eee;
}#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 50px;
background: #ccc;
}#content {
background: #0f0;
position: absolute;
width: 100%;
left: 0;
top: 50px; /* depending on height of header */
bottom: 50px; /* depending on height of footer */
overflow: auto;
/* IE only needs the next line but other ignore it see note at bottom - the 100 may change depending on total height of header and footer */
height: expression(document.body.clientHeight - 100 + "px");
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">content div<br >
enter loads of content to trigger scrollbar
</div>
<div id="footer">footer</div>
</body>
</html>
If that doesn't help, shout on the JS Forum
Note: the height expression could be hidden inside a conditional comment to be extra careful
Suzy
Thanks a lot Suzy!
Owe you one :)
