0

我的布局在 Firefox 和 Chrome 中运行良好，但在 IE 或 Opera 中运行良好，因此我正在寻找更好的解决方案或在不使用任何 JavaScript 的情况下修改我目前的解决方案的方法。问题是我无法让最里面的 div 在包含它们的 div 中获得最大高度，即 #l 在#left 中，#r 在#right 中。

<div id="wrap">
    <div id="header">
    </div>
    <div id="content">
        <div id="left">
            <div id="l">
                L
            </div>
        </div>
        <div id="right">
            <div id="r">
                R
            </div>
        </div>
    </div>
</div>

这是我到目前为止提出的CSS：

* {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
body, div {
    margin: 0;
    padding: 0;
}
body {
    overflow-y: scroll;
}
html, body {
    height: 100%;
}
#wrap {
    background-color: #dddddd;
    width: 100%;
    height: 100%;
    display: table;
    border-spacing: 1em;
}
#header {
    height: 2em;
    display: table-row;
}
#content {
    background-color: #f49837;
    width: 90%;
    display: table-row;
    padding: 1em;
}
#left {
    width: 30%;
    background-color: #490274;
    display: table-cell;
    padding: 1em;
}
#right {
    width: 70%;
    background-color: #490274;
    display: table-cell;
    padding: 1em;
}
#l, #r {
    width: 100%;
    height: 100%;
    background-color: #e1098f;
    border-spacing: 0.5em;
    display: table;
}

这是一个 jsfiddle，它显示了它应该是什么样子（如果你在 Firefox 或 Chrome 中查看它）。粉色字段应覆盖紫色字段的整个高度，填充除外。

http://jsfiddle.net/SsyAr/1/

编辑：即使我应该解决 IE/Opera 问题，我也意识到我还需要其他东西，因为 CSS 表没有可用的 colspan 功能，如果我希望标题有宽度，我需要它100%。标准解决方案似乎是使用 display: table-caption + display: table-row-group。但是，无论我如何尝试，我都无法使标题成为视口 100% 总高度的一部分。table-row-group 将 100% 高，并在其上添加标题。

4

0 回答 0