使div填充父级的剩余空间

Question

我需要一些帮助定位div.HTML结构如下:

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

我有以下CSS:

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

左div的宽度和高度是动态的.

我想要实现的是:

1. 使右div的高度等于左div的高度.
2. 使右侧div的宽度用class填充div的其余部分item.
3. 带有类的段落bottom应位于右侧div的底部.

这是一个代表我目标的简单图像:

以及JSFiddle演示的链接.

Answer 1

获得正确的位置和宽度.bottom似乎是跨浏览器CSS解决方案的最大障碍.

选项

1.漂浮

正如@joeellis所展示的那样,灵活的宽度可以通过仅浮动左列并应用于overflow:hidden右列来实现.

.bottom在任何浏览器中都无法实现这一位置.对于具有相同,可变高度的浮动柱,没有CSS解决方案.绝对定位的.bottom元素必须位于右列div内,因此100%宽度将使其具有正确的大小.但是,由于右列不一定是左柱一样高,定位.bottom与bottom:0不一定会放置在容器的底部.

2. HTML表和CSS表

通过给左单元格宽度为1px而不指定右单元格的宽度,可以实现灵活的宽度.两个细胞都会长大以适应内容.任何额外的空间都将被添加到右侧单元格中.

如果.bottom在右表格单元格内,则无法在Firefox中实现该位置.相对位置对Firefox中的表格单元格没有影响; 绝对位置和100%宽度不会相对于右表格单元格.

如果.bottom在右列中将其视为单独的表格单元格,则除Firefox之外的任何浏览器都无法实现右表格单元格和底部表格单元格的正确高度.表格单元格的高度不同于它们的宽度(Firefox除外).

3. CSS3 flexbox和CSS3网格

Flexbox和网格是不久的将来有前途的布局工具.但是IE9或更早版本不支持flexbox,IE10以外的任何浏览器都不支持网格.尚未测试是否可以实现此布局,但浏览器支持可能会阻止它们成为目前的选项.

摘要

• Floats不为任何浏览器提供解决方案.
• HTML表和CSS表不提供跨浏览器解决方案.
• Flexbox不为IE9或更早版本提供潜在的解决方案(可能会或可能不会为其他浏览器提供解决方案).
• 网格只提供IE10的潜在解决方案(可能会或可能不会提供解决方案).

结论

目前似乎没有足够的CSS解决方案,可以在足够的相关浏览器中工作,可能的例外是flexbox(如果不需要支持IE9及更早版本).

jQuery的

这里有一些修改过的演示,使用jQuery强制列具有相同的高度.两个演示的CSS和jQuery是相同的.HTML仅根据左右列中的内容有所不同.这两个演示在所有浏览器中都经过良好测 相同的基本方法可用于纯JavaScript.

• 左边更高的内容
• 更高的内容在右边

为了简单起见,我将左右div的内部填充移动到子元素(.content).

Answer 2

通过将它们显示table-cell为父节点,可以实现相同高度并保持在同一行的同级元素display: table.
工作小提琴:http://jsfiddle.net/SgubR/2/(它还显示了用于创建列overflow: hidden的浮动元素技术.后者需要一个clearfix)

CSS中的表格单元格使用您想要的任何HTML元素(section,div,span,li等),其语义与用于表格布局的表格,tr和td元素无关(除了视觉结果相同,这就是什么我们想要).

• display: table 在父级上设置
• display: table-row 可以在中间的元素上使用,但如果没有它就可以使用,很好
• display: table-cell 每个孩子都有
• 宽度设置为无,部分或全部这些"单元格".浏览器将适应内容和宽度设置,以便计算它们的宽度(显然,父级的总宽度)
• table-layout: fixed将告诉浏览器切换到其他表格布局算法,他们不关心内容的数量,只关心CSS设置的宽度
• vertical-align: top 在大多数情况下都需要(但你可以设置其他值,非常适合复杂的布局)
• 边距不适用于"单元格",仅适用于填充.边距仅适用于桌子本身.虽然你仍然可以用border-collapse: separate和/或分开"细胞"border-spacing: 4px 6px

兼容性:
IE6/7的IE8 + 后备(如果需要)与内联块完全相同

在以前的答案中有更长的解释:这里和那里还有古老的人造柱方法(你的设计必须考虑到这种技术)