|
|
Posted by mark.olszowka on 01/20/06 22:09
My Goal
Creat a page consisting of a floating, centered, content section whose
background is a different color than the background of the page itself
this content section should extend to the bottom of the browser window,
or to the bottom of the content residing within the content section,
whichever is greater.
the page needs to display/behave correctly in IE, FireFox, Opera, and
Netscape (i would settle for IE and FireFox).
the test page markup is included below
the page, as it is currently coded, works fine in IE, but not in
FireFox, Opera, or Netscape.
To see issue in other browsers, do the following
make browser window smaller than content so scrollbars appear
refresh page
scroll down page using scrollbars
you should see center content color end
if you resize browser window, page/content displays correctly
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
html
{
height: 100%;
}
body {
height: 100%;
margin:0;
}
#txt
{
background-color: lime;
width: 600px;
margin: auto;
height: 100%;
}
</style>
</head>
<body>
<div id="txt">
<table>
<tr><td>1000</td></tr>
<tr><td>2000</td></tr>
<tr><td>3000</td></tr>
<tr><td>4000</td></tr>
<tr><td>5000</td></tr>
<tr><td>6000</td></tr>
<tr><td>7000</td></tr>
<tr><td>1000</td></tr>
<tr><td>2000</td></tr>
<tr><td>3000</td></tr>
<tr><td>4000</td></tr>
<tr><td>5000</td></tr>
<tr><td>6000</td></tr>
<tr><td>7000</td></tr>
</table>
</div>
</body>
</html>
Does anybody know how to accomplish this task?
I have tried different combinations of height and
min-height/max-height, but to no avail.
Thanks
Navigation:
[Reply to this message]
|