Forum Home
Press F1
 
Thread ID: 86180 2008-01-07 06:38:00 Opera unable to scroll vertically when html {height: 100%} Renmoo (66) Press F1
Post ID Timestamp Content User
628132 2008-01-07 06:38:00 Dear all,
I am currently designing web pages for some club. I noticed that when I set the height of html to 100%, Opera browser will disallow any vertical scrolling even though the content should have stretched it. The web structure of the web pages is like this:


<html>
<body>
<div id="container">
<table>
<tbody>
<tr>
<td>
Content Goes here
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

All the tags above have been set to height: 100% (except for <tr>).

Cheers :) 		Renmoo (66)
628133 2008-01-07 06:57:00 I am unable to reproduce the problem - can you link to the offending site for further diagnosis? This is the code I used:
<html style="height: 100%;">
<body>
<div id="container">
<table>
<tbody>
<tr>
<td>
<span style="height: 2500px; display: block;">Content goes here</span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Using Opera 9.5b1 x86_64 (build 1643), running on Debian Lenny. 		Erayd (23)
628134 2008-01-07 07:06:00 The entire code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org

<html xmlns="www.w3.org xml:lang="en" lang="en">
<head>
<style>
html, body{
height: 100%;
}

#biggestcontainer{
height: 100%; margin: 0 0 10px 0; position: relative;
}

#left{
height: 100%; width: 100px; border- width: 1px; border-color: blue; border-style: solid; float: left;
}

#right{
height: 100%; width: 100px; float: left;
}
</style>
</head>
<div id="biggestcontainer">
<table cellpadding="0" cellspacing="0" height="100%">
<tbody height="100%">
<tr>
<td height="100%">
<div id="left">
bahahha
</div>

<div id="right">
asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br />
asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br />
asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd
<br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br />
asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br /> asdsd <br />

</div>
</td>
</tr>
</tbody>
</table>
</div>
</html> 		Renmoo (66)
628135 2008-01-07 07:23:00 I still can't reproduce the problem. Using your code, verbatim, the page scrolls just fine. Which *exact* version of Opera are you using? Erayd (23)
628136 2008-01-07 07:27:00 Oopsy, the problem arises in both Opera 9.23 and Opera 9.25. Under Opera 9.5b, the scrolling is fine but the left column is not stretched to 100% height. Renmoo (66)
628137 2008-01-07 07:53:00 If you are simply after two equal-height columns with a minimum height of 100% of the browser viewport, then perhaps something like this would be more appropriate:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org
<html xmlns="www.w3.org xml:lang="en" lang="en">
<head>
<style type="text/css">
#containertable {
min-height: 100%;
width: 100%;
}
#left {
border: 1px solid #00F;
width: 220px;
}
#right {
border: 1px solid #F00;
}
td {
vertical-align: top;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#containertable {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<table id="containertable" cellpadding="0" cellspacing="0">
<tr>
<td id="left">
<p>Some shorter content.</p>
</td>
<td id="right">
<p>This is above the long content.</p>
<!--Really long content block-->
<div style="display: block; height: 2500px;"><p>This <em>is</em> the long content.</p></div>
<p>This is below the long content.</p>
</td>
</tr>
</table>
</body>
</html>No offense to your code, but it seems to be a little messy - you have extra elements all over the place. Also note that height="100%" is not the same as style="height: 100%; ". Your stylesheet will override the first rule (as the first rule is just plain HTML), but not the second (inline CSS).

The conditional comments are to work around IE's lack of support for the min-height CSS rule. 		Erayd (23)
1