4

有以下测试代码。

<!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 小（作为 table-row 但设置为 display:block）。歌剧也是。Chrome 在绿色 div（表格行）的 100% 高度显示黄色 div。

我需要它在 Firefox、Opera、IE>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！

4

2 回答 2

3

这似乎使所有内容在 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（我可能是错的？）。

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

在此处输入图像描述

编辑：

如果你想让你的行有相同的高度，你可以使用这个标记：

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

在此处输入图像描述

于 2013-04-02T07:26:05.360 回答
0

如果您的目标是所有行的高度相同，那么最好使用合适的表格：

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

于 2013-04-02T07:31:48.073 回答