Question

我搜索了谷歌，stackoverflow和其他表格和网站，但我找不到解决方案。我发现的一切都不适合我。

缩写：

#DivC是标题左下方和页脚上方的内容框。

#DivSB是标题右下方和页脚上方的内容框。

#DivWC是#DivC和#DivSB的容器，不可见。

我的HTML结构如下所示：

<div id="WC">
    <div id="SB">...</div>
    <div id="C">...</div>
</div>

注意：

#DivWC高度会自动调整为#DivC和#DivSB中最长的div（使用overflow:hidden）

#DivSB有float:right CSS属性。

我正在努力使#DivC自动调整为#DivWC高度。我想对#DivSB执行相同操作，以便#DivC或#DivSB更高，#DivWC将具有最高框的高度，然后是另一个框（更短）来自#DivC或#DivSB的框会调整为#DivWC高度。

将所有父元素设置为height:100%会导致内容框的高度为100个视点高度。

我尝试使用display:table和display:table-row以及display:table-cell，但这些会彻底破坏布局。

我已经看到绝对定位的一些用法，但据我所知，绝对定位被其他元素忽略，所以我不认为绝对定位会起作用，因为在其他页面和页脚上可能会添加更多的框不会在正确的地方。

我正在寻找使用CSS和HTML（5）的解决方案。无需使用添加图像或使用Javascript。

我仍然对网络编码知之甚少，所以如果可以的话，请简单回答你的答案或尽可能地解释（尽可能）每一步（我理解并通过解释更好地学习）。

Answer 1

您可以通过将#DivWC显示为表格，将#DivC和#DivSB显示为表格单元格来实现这一目标。将他们的CSS更改为：

注意：不要忘记交换#DivC和#DivSB的位置。

/* *** Content *** */

#DivWC{
    width:100%;
    margin-top:20px;
    height:100%; /* delete if you want it to only take the height it needs (based on children's content */
    background-color:purple;
    display: table;
    border-collapse:separate;
    border-spacing:5px;
}

/* *** Content (Content) *** */

#DivC{
    background-color:#D4E9EB;
    border-radius:15px;
    padding:10px;
    display: table-cell;
}

/* *** SideBar (Content) *** */

#DivSB{
    background-color:#D4E9EB;
    border-radius:15px;
    width:150px;
    padding:10px;
    display: table-cell;
}

Answer 2

HTML：

<div id="WC">
    <div id="C">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum</div>
    <div></div>
    <div id="SB">Lorem ipsum @RIGHT</div>
</div>

CSS：

div {
    border: 1px solid #666;
    height: 20px;
}

#WC {
    background-color: #ffc;
    display: table;
    width: 100%;
}
#WC > div {
    display: table-cell;
}
#SB {
    background-color: #cfc;
    width: 100px;
}
#C  {
    background-color: #ccf;
    width: 200px;
}

http://jsfiddle.net/jjG4y/1/

将子div高度设为父div的100％

2 个答案: