Hi,
I am developing a reusable ASP.net server control that needs to work in IE 6+, FF 2+ and Safari both Quirks and Standards mode.
The control will expose two user definable properties height and width both of these attributes can be defined as either a percentage or as a pixel value.
Inside the control I have two column Divs that contain a navigation bar and the controls contents. The columns need to be a Div to make use of the overflow style when the content is bigger than the container. See example prototype code below;
<!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></title>
</head>
<body>
<div style="height: 100%; width:400px; background-color: Green; ">
<div style="height: 100%; width: 25%; background-color: Red; float:left; overflow:auto;">
LongString:<br />Stuffsdfsfdsdfsfsdfdfsdfsdfsdfsdfsdxgsdfgsdfgsdgiusdfgiudfgifdgu
</div>
<div style="height: 100%; width: 75%; background-color: Pink; float:right;">
Stuff
<br />
More stuff
<br />
And some more
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The issue I run into is that in standards mode when using percent base height, the divs as expected only render as big as their content. It appears that the only way to resolve this issue is to use JavaScript.
This then creates issues in that the control can re-render asynchronously using AJAX and the heights get out of sync.
Is what I am trying to achieve impossible or am I looking in the wrong place?
Nick
-
<div style="height: 100%
100% of what? The div isn't absolutely-positioned, so the answer is its parent. Parent is body.
How high is body? Nothing specified: defaults to ‘auto’. ‘auto’ means the height of body is calculated from the height of its contents. The bug in Quirks Mode is that ‘body’ has a minimum height matching the viewport.
Set both html and body to ‘height: 100%’ to really get 100% in Standards Mode.
Nick : Sorry I didn't make it clear in the question, as the code is for a server control I have no control over the style of either the html tag or body tag. The code I supplied was just to demo the rendered mark-up.bobince : Then the only thing you have left is to make the wrapper div ‘position: absolute’, in which case ‘height: 100%;’ is now relative to the Initial Containing Block (the viewport). -
I hate to say it, but sometimes when having to work with old browsers, using old-school techniques gets the job done faster sometimes. Try <table> tags. :(
<table style="height: 100%; width:400px; background-color: Green; "> <tr> <td style="height: 100%; width: 25%; background-color: Red; overflow:auto;"> LongString:<br /> Stuffsdfsfdsdfsfsdfdfsdfsdfsdfsdfsdxgsdfgsdfgsdgiusdfgiudfgifdgu </td> <td style="height: 100%; width: 75%; background-color: Pink; "> Stuff <br /> More stuff <br /> And some more </td> </tr> </table>
0 comments:
Post a Comment