Question

我有一个在Firefox和Chrome中运行良好的布局，但在IE或Opera中没有，所以我正在寻找一个更好的解决方案或一种不使用任何JavaScript来修改我现有解决方案的方法。问题是我不能让最里面的div在包含它们的div中获得最大高度，即#left中的#l和#right中的#r。

<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％高，并添加标题。

CSS高度：内部和外部div的100％

0 个答案: