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

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

还有一个JSFiddle demo的链接。

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 之外的任何浏览器都不支持网格。尚未测试是否可以实现此布局，但浏览器支持可能会阻止它们成为目前的选项。

总结

• 浮动不为任何浏览器提供解决方案。
• HTML 表格和CSS tables 不提供跨浏览器解决方案。
• Flexbox 没有为IE9 or earlier 提供潜在的解决方案（可能会也可能不会为其他浏览器提供解决方案）。
• Grids 只为IE10 提供了一个潜在的解决方案（可能会也可能不会提供解决方案）。

结论

目前似乎没有合适的 CSS 解决方案，可以在足够多的相关浏览器中工作，除了 flexbox（如果不需要支持 IE9 和更早版本）。

jQuery

​​>

这里有几个经过修改的演示，它们使用 jQuery 来强制列具有相同的高度。两个演示的 CSS 和 jQuery 是相同的。 HTML 的区别仅在于左右列中有多少内容。两个演示都在所有浏览器中测试良好。相同的基本方法可以用于纯 JavaScript。

• Taller content on the left
• Taller content on the right

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

Answer 2

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

CSS 中的 Table-cell 使用任何你想要的 HTML 元素（section、div、span、li 等），它的语义与用于表格布局的 table、tr 和 td 元素无关（除了视觉结果相同） ，这就是我们想要的）。

• display: table 设置在父级上
• display: table-row 可以用在中间的元素上，但如果没有它也可以工作，很好
• display: table-cell 设置在每个孩子身上
• 没有设置宽度，部分或全部这些“单元格”。浏览器将同时适应设置的内容和宽度，以计算它们的宽度（显然还有父级的总宽度）
• table-layout: fixed 会告诉浏览器切换到 other 表格布局算法，他们不关心内容的数量，只关心 CSS 设置的宽度
• 在大多数情况下都需要vertical-align: top（但您可以设置其他值，非常适合复杂的布局）
• 边距不适用于“单元格”，仅适用于填充。边距仅适用于表本身。尽管您仍然可以使用 border-collapse: separate 和/或 border-spacing: 4px 6px 分隔“单元格”

兼容性：IE8+
如果需要，IE6/7 的回退与 inline-block 完全相同

以前的答案中的较长解释：here 和 there 以及 faux-columns 的旧方法（您的设计必须考虑这种技术）

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

但是，他们的身高并不完全相关；在此示例中，您的左侧块的高度仍需要手动设置（因为它是一个浮动容器）