具有怪癖和标准模式的可重用 Asp.net 服务器控件答案

【问题标题】：Resuable Asp.net server control with Quirks and Standards mode具有怪癖和标准模式的可重用 Asp.net 服务器控件
【发布时间】：2009-03-03 19:23:34
【问题描述】：

我正在开发一个可重用的 ASP.net 服务器控件，它需要在 IE 6+、FF 2+ 和 Safari 的 Quirks 和 Standard 模式下工作。

该控件将公开两个用户可定义的属性 height 和 width 这两个属性都可以定义为百分比或像素值。

在控件内部，我有两列 Div，其中包含导航栏和控件内容。当内容大于容器时，列需要是一个 Div 才能使用溢出样式。请参阅下面的示例原型代码；

<!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>

我遇到的问题是，在标准模式下，当使用百分比基高时，按预期显示的 div 只呈现与其内容一样大的内容。看来解决此问题的唯一方法是使用 JavaScript。

这会产生问题，即控件可以使用 AJAX 异步重新渲染，并且高度不同步。

我想要实现的目标是不可能的，还是我找错地方了？

【问题讨论】：

我不明白为什么这需要在怪癖和标准模式下呈现。要么包含有效的 DocType，要么不包含，对吧？
不幸的是，该控件需要在以 Standard and Quirks 模式运行的 Asp.net 应用程序中使用。

标签： asp.net javascript ajax web-standards

【解决方案1】：

<div style="height: 100%

100% 什么？ div 不是绝对定位的，所以答案是它的父级。父母是身体。

身体有多高？未指定任何内容：默认为 auto。 auto 表示正文的高度是根据其内容的高度计算的。 Quirks Mode 中的 bug 是 body 具有与视口匹配的最小高度。

将 html 和 body 都设置为 height: 100% 以在标准模式下真正获得 100%。

【讨论】：

对不起，我没有在问题中说清楚，因为代码是用于服务器控件的，所以我无法控制 html 标签或 body 标签的样式。我提供的代码只是为了演示渲染的标记。
那么您唯一剩下的就是使包装器 div 'position: absolute'，在这种情况下，'height: 100%;' 现在是相对于初始包含块（视口）的。

【解决方案2】：

我不想这么说，但有时当不得不使用旧浏览器时，使用老式技术有时可以更快地完成工作。试试

标签。 :(

<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>

【讨论】：