使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的宽度用类item填充div的其余部分。
3. 具有类bottom的段落应位于右侧div的底部。

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

以及JSFiddle演示的链接。

Answer 1

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

选项

1.漂浮

正如@joeell所展示的那样，灵活的宽度可以通过仅浮动左列并将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为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在每个孩子上设置display: table-cell
• 宽度设置为无，部分或全部这些“单元格”。 浏览器将适应内容和宽度设置，以便计算它们的宽度（显然，父级的总宽度）
• table-layout: fixed会告诉浏览器切换到其他表格布局算法，他们不关心内容的数量，只关注CSS设置的宽度
• vertical-align: top在大多数情况下都需要vertical-align: top （但你可以设置其他值，非常适合复杂的布局）
• 边距不适用于“单元格”，仅适用于填充。 边距仅适用于桌子本身。 虽然您仍然可以将“单元格”与border-collapse: separate和/或border-spacing: 4px 6px

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

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

Answer 3

只需向右列添加一个oveflow ，不要浮动它。

.right {
  position: relative;
  overflow: hidden;
}

这将使right填写宽度的其余部分。

Answer 4

像这样的东西可能会起作用：

http://jsfiddle.net/PCvy9/2/

您正在寻找的主要关键点：

 .right {
   overflow: hidden;
   background-color: #C82927;
 }

这是因为称为“块格式化上下文”。 关于为什么在这里的伟大推理和教程： http ： //colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

然而，他们的高度并没有完全联系在一起; 在这个例子中，您的左侧块的高度仍然需要手动设置（因为它是一个浮动的容器）