Question

我正在开发一个可重用的ASP.net服务器控件，需要在IE 6 +，FF 2+和Safari中使用Quirks和Standards模式。

控件将显示两个用户可定义属性的高度和宽度，这两个属性都可以定义为百分比或像素值。

在控件内部，我有两个列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异步重新渲染，并且高度不同步。

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

Answer 1

<div style="height: 100%

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

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

将html和body设置为height: 100%，使其在标准模式下真正达到100％。

Answer 2

我讨厌这样说，但有时候当我不得不使用旧版浏览器时，使用老式技术可以更快地完成工作。试试＆lt; table＆gt;标签。：（

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

具有Quirks和Standards模式的可恢复的Asp.net服务器控件

2 个答案: