Question

有以下测试代码。

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;">
    <div style="display:table-row;background:red;">A</div>
    <div style="display:table-row;background:green;">
        <div style="display:block;background:yellow;width:100%;height:100%;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">C</div>
</div>
</body>
</html>

Firefox它显示黄色div小（作为表行但设置显示：块）。歌剧也。 Chrome在绿色div（表格行）的100％高度显示黄色div。

我需要这个功能在Firefox，Opera，IE＆gt; 8中与Chrome相同！

更新：

我发现了以下问题：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;">
    <div style="height:50px;display:table-row;background:red;">A</div>
    <div style="display:table-row;background:green;">
        <div style="display:table-cell;background:yellow;">
            <div style="display:block;width:100%;height:100%;background:darkred;">B</div>
        </div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">C</div>
</div>
</body>
</html>

不在Opera中使用黑暗的div！

Answer 1

这似乎可以使所有内容在IE，FireFox和Chrome中一致呈现：

<!DOCTYPE html>
<html style="min-width:100%;min-height:100%;height:100%;width:100%">
<body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%">
<div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;">
    <div style="display:table-row;background:red;">
        <div style="display:table-cell">A</div>
    </div>
    <div style="display:table-row;background:green;">
        <div style="display:table-cell;background:yellow;width:100%;height:100%;">B</div>
    </div>
    <div style="display:table-row;background:blue;height:50px;">
        <div style="display:table-cell">C</div>
    </div>
</div>
</body>
</html>

唯一的区别是我在每个表格行中添加了display:table-cell个div。它将有一个50px高的“C”行，一个最小的“A”行，其余的则填充一个黄色的“B”行。

看起来你可以简单地将{B} div从display:block更改为display:table-cell，但我认为最好在你的table-cell内使用table-row <!DOCTYPE html> <html style="min-width:100%;min-height:100%;height:100%;width:100%"> <body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%"> <div style="display:table;width:100%;height:100%;min-width:100%;min-height:100%;"> <div style="display:table-row;background:red;height:33%"> <div style="display:table-cell">A</div> </div> <div style="display:table-row;background:green;height:33%"> <div style="display:table-cell;background:yellow;">B</div> </div> <div style="display:table-row;background:blue;height:33%;"> <div style="display:table-cell">C</div> </div> </div> </body> </html>（我可能错了？）。

我修改过的所有3个浏览器的屏幕截图：

enter image description here

编辑：

如果您尝试让行具有相同的高度，则可以使用此标记：

{{1}}

enter image description here

Answer 2

如果您的目标是为所有行提供相同的高度，那么最好使用正确的表格：

<table style="width:100%;height:100%;">
  <tr style="background:red;">
    <td>A</td></tr>
  <tr style="background:green;">
    <td style="background:yellow;">B</td>
  </tr>
  <tr style="background:blue;">
    <td>C</td>
  </tr>
</table>

这是一个小提琴：http://jsfiddle.net/B5jUh/9/

HTML5显示表嵌套div不适用于Firefox＆amp;歌剧

2 个答案: