Resuable Asp.net server control with Quirks and Standards mode
Question
I'm 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 Div's 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?
2 answers
solution1
0 2009-03-03 21:30:19
<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.
solution2
0 2009-04-10 00:13:29
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.