Question

我认为这是IE9 / 10的具体问题。我正在尝试按如下方式创建灵活的行布局：

|----------------------------------|
|    FIXED HEIGHT                  |
|----------------------------------|
|    FIXED HEIGHT, SOMETIMES HIDDEN|
|----------------------------------|
|                                  |
|    FLEXIBLE HEIGHT               |
|                                  |
|----------------------------------|
|    FIXED HEIGHT                  |
|----------------------------------|

我还希望外部容器具有适合浏览器视图端口的灵活高度和宽度。

天真的，可能，我认为既然我只支持Chrome，Firefox，Safari和IE9 / 10，那么display: table，display: table-row，display: table-cell可能是一个好方法去，所以我想出了：

jsFiddle：http://jsfiddle.net/Nugps/2/

HTML：

<div class="stage">
    <div class="table">
        <div class="row">
            <div class="cell">
                <div class="content1">one</div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="content1">two</div>
            </div>
        </div>
        <div class="row flexible">
            <div class="cell">
                <div class="content2">three</div>
            </div>
        </div>
        <div class="row">
            <div class="cell">
                <div class="content1">four</div>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

.stage {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
}

.table {
    display: table;
    height: 100%;
    width: 100%;
    background: lightblue;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    border: 3px solid red;
    height: 50px;
}

.row.flexible {
    height: 100%;
}

.row.flexible .cell {
    height: 100%;
}

.content2 {
    background: lightgreen;
    height: 100%; /* setting this in IE causes the content to be 100% of the table rather than the table cell height */
}

如果您在Chrome中打开此jsFiddle，一切都按预期进行。然而在IE10中，我也怀疑IE9，高度混乱（.content2高度是表格的100％而不是单元格。）

除了使用javascript手动设置内容的高度外，还有其他好的解决方法吗？或者是否有更好的CSS布局，我可以使用？由于IE9，我无法使用较新的flexbox。

Answer 1

我想知道content2类是否真的需要样式，你能不能只将背景颜色添加到.row.flexible .cell并一起摆脱.content2样式。

这是我的解决方案： http://cdpn.io/Ewrsa

它适用于IE9 / 10

将表格单元格的内部div的高度设置为IE9 / 10中表格单元格高度的100％

1 个答案: