G
Guest
Hi
I am trying to create a web form of the following structure
<Header/>
<Middle>
<Nav Panel/><Content Panel/>
</Middle>
<Footer/>
The header and footer will be fixed size as they will contain images. I want
the whole page to size to the browser window and if there is too much content
in the nav or content panels then I'd like scrollbars to appear. I am having
real problems trying to get the effect I want as scrollbars seem only to want
to appear to scroll the whole page.
I have removed all asp controls and tried to render an HTML page by hand.
The effect I want is similar to that of the following page, except I don't
want to have to hard-code a value for the height of the middle of the page,
I'd like the browser to fill the page with whatever is in the middle.
(Basically I want to remove the "height:200px" from the "middle" div and have
scroll bars appear if there is too much content)
The only option I can see at the moment is to try and determine the browser
size and calculate the width of the "middle" div manually in code but that
seems rather inelegant.
Any ideas?
<!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>Test Page</title>
</head>
<body>
<div style="height: 100%; background-color: green;">
<div id="header" style="height: 100px; background-color: red;">
Here's the header
</div>
<div id="middle" style="display: block; background-color: Yellow;
height:200px;
width: 100%; overflow: auto">
<div id="nav" style="background-color: Blue; width: 30%; float:
left; height: 100%;
overflow: auto">
Lots and lots of text<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4<br />
Line 5<br />
Line 6<br />
Line 7<br />
Line 8<br />
Line 9<br />
Line 10<br />
Line 11<br />
Line 12<br />
Line 13<br />
Line 14<br />
Line 15<br />
Line 16<br />
</div>
<div id="Div1" style="background-color: Lime; width: 70%; float:
right; height: 100%;
overflow: auto">
Content window. This also could have lots of text <br />
Scrolling independently of the left div.
Some more lines 1 <br />
Some more lines 2 <br />
Some more lines 3 <br />
Some more lines 4 <br />
Some more lines 5 <br />
Some more lines 6 <br />
Some more lines 7 <br />
Some more lines 8 <br />
Some more lines 9 <br />
Some more lines 10 <br />
Some more lines 11 <br />
Some more lines 12 <br />
Some more lines 13 <br />
Some more lines 14 <br />
Some more lines 15 <br />
Some more lines 16 <br />
Some more lines 17 <br />
Some more lines 18 <br />
Some more lines 19 <br />
Some more lines 20 <br />
Some more lines 21 <br />
</div>
</div>
<div id="footer" style="display: block; height: 100px;
background-color: red;">
Here's the footer
</div>
</div>
</body>
</html>
I am trying to create a web form of the following structure
<Header/>
<Middle>
<Nav Panel/><Content Panel/>
</Middle>
<Footer/>
The header and footer will be fixed size as they will contain images. I want
the whole page to size to the browser window and if there is too much content
in the nav or content panels then I'd like scrollbars to appear. I am having
real problems trying to get the effect I want as scrollbars seem only to want
to appear to scroll the whole page.
I have removed all asp controls and tried to render an HTML page by hand.
The effect I want is similar to that of the following page, except I don't
want to have to hard-code a value for the height of the middle of the page,
I'd like the browser to fill the page with whatever is in the middle.
(Basically I want to remove the "height:200px" from the "middle" div and have
scroll bars appear if there is too much content)
The only option I can see at the moment is to try and determine the browser
size and calculate the width of the "middle" div manually in code but that
seems rather inelegant.
Any ideas?
<!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>Test Page</title>
</head>
<body>
<div style="height: 100%; background-color: green;">
<div id="header" style="height: 100px; background-color: red;">
Here's the header
</div>
<div id="middle" style="display: block; background-color: Yellow;
height:200px;
width: 100%; overflow: auto">
<div id="nav" style="background-color: Blue; width: 30%; float:
left; height: 100%;
overflow: auto">
Lots and lots of text<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4<br />
Line 5<br />
Line 6<br />
Line 7<br />
Line 8<br />
Line 9<br />
Line 10<br />
Line 11<br />
Line 12<br />
Line 13<br />
Line 14<br />
Line 15<br />
Line 16<br />
</div>
<div id="Div1" style="background-color: Lime; width: 70%; float:
right; height: 100%;
overflow: auto">
Content window. This also could have lots of text <br />
Scrolling independently of the left div.
Some more lines 1 <br />
Some more lines 2 <br />
Some more lines 3 <br />
Some more lines 4 <br />
Some more lines 5 <br />
Some more lines 6 <br />
Some more lines 7 <br />
Some more lines 8 <br />
Some more lines 9 <br />
Some more lines 10 <br />
Some more lines 11 <br />
Some more lines 12 <br />
Some more lines 13 <br />
Some more lines 14 <br />
Some more lines 15 <br />
Some more lines 16 <br />
Some more lines 17 <br />
Some more lines 18 <br />
Some more lines 19 <br />
Some more lines 20 <br />
Some more lines 21 <br />
</div>
</div>
<div id="footer" style="display: block; height: 100px;
background-color: red;">
Here's the footer
</div>
</div>
</body>
</html>