1. Home
  2. Forums Index
  3. Browser Side / CSS 10:54 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Problems with scrollbars..

Internet Explorer draws scrollbars and Mozilla ignores the height.

         

Acro

8:54 pm on Jul 27, 2004 (gmt 0)



The following code are causing me some problems. Internet Explorer seems to draw scrollbars because of the height-attribute and Mozilla seems to ignore the height-attribute.

I hope someone are able to help me out as I already have tried a lot of possible solutions without any luck.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
body {
background-color:#fff;
width:100%;
height:100%;
margin-left:1px;
margin-right:1px;
margin-top:117px;
margin-bottom:1px;
}
</style>
</head>
<body style="background-color:#fff;">
<!-- Top container -->
<div style="position:absolute; top:1px; width:100%; height:90px; background-color:#bbb;">
<!-- Top box -->
<div style="margin: 0px auto; border-left: 1px solid #fff; border-right: 1px solid #fff; width:700px; height:100%; background-color:#aaa;"></div>
</div>
<!-- Navigation container -->
<div style="position:absolute; top:92px; width:100%; height:23px; background-color:#ddd;">
<!-- Navigation box -->
<div style="margin: 0px auto; border-left: 1px solid #fff; border-right: 1px solid #fff; width:700px; height:100%; background-color:#ccc;"></div>
</div>
<!-- Main container -->
<div style="height: 100%;">
<!-- Content box -->
<div style="margin:0px auto; z-index:0; width:700px; height:100%; padding-bottom:40px; background-color:#eee;"></div>
<!-- Copyright box -->
<div style="margin:0px auto; z-index:1; margin-top:-40px; width:700px; height: 40px; background-color:#ddd;"></div>
</div>
</body>
</html>

Best Regards,
Acro

Mobull

11:52 am on Jul 28, 2004 (gmt 0)

10+ Year Member



'height:100%' is not valid indeed. Only fixed heights will work (no percentage thus). Or you can calculate the height you need with a javascript function?
It might work when making both the body tag and the html tag (which is below the body tag) both 100%.

like this: 


<!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 Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
html,body {
height: 100%;
}
body {
background-color:#fff;
width:100%;
margin-left:1px;
margin-right:1px;
margin-top:117px;
margin-bottom:1px;
}
</style>
</head>
<body style="background-color:#fff;">
<!-- Top container -->
<div style="position:absolute; top:1px; width:100%; height:90px; background-color:#bbb;">
<!-- Top box -->
<div style="margin: 0px auto; border-left: 1px solid #fff; border-right: 1px solid #fff; width:700px; height:100%; background-color:#aaa;"></div>
</div>
<!-- Navigation container -->
<div style="position:absolute; top:92px; width:100%; height:23px; background-color:#ddd;">
<!-- Navigation box -->
<div style="margin: 0px auto; border-left: 1px solid #fff; border-right: 1px solid #fff; width:700px; height:100%; background-color:#ccc;"></div>
</div>
<!-- Main container -->
<div style="height: 100%;">
<!-- Content box -->
<div style="margin:0px auto; z-index:0; width:700px; height:100%; padding-bottom:40px; background-color:#eee;"></div>
<!-- Copyright box -->
<div style="margin:0px auto; z-index:1; margin-top:-40px; width:700px; height: 40px; background-color:#ddd;"></div>
</div>
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:54 pm May 1, 2026