html - 让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. class为bottom的段落应该在右边div的底部。

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

还有一个指向 JSFiddle demo 的链接.

Answer 1

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

选项

<强>1。 float

正如@joeellis 所展示的，灵活的宽度可以通过仅 float 左列，并将 overflow:hidden 应用于右列来实现。

.bottom的位置在任何浏览器中都无法实现。对于具有相等可变高度的 float 列，没有 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 之外的任何浏览器都不支持网格。尚未测试是否可以实现此布局，但浏览器支持可能会阻止它们成为目前的选项。

总结

• float 不为任何浏览器提供解决方案。
• HTML 表格和 CSS tables不要提供跨浏览器的解决方案。
• Flexbox没有为 IE9 or earlier 提供潜在的解决方案(可能会也可能不会为其他浏览器提供解决方案)。
• Grids只提供潜在的解决方案 IE10 (可能会也可能不会在那里提供解决方案)。

结论

目前似乎没有合适的 CSS 解决方案，可以在足够多的相关浏览器中工作，flexbox 可能是个异常(exception)(如果不需要对 IE9 和更早版本的支持)。

jQuery

这里有几个修改过的演示，它们使用 jQuery 强制列具有相同的高度。两个演示的 CSS 和 jQuery 是相同的。 HTML 的不同之处仅在于左右栏中的内容量。这两个演示在所有浏览器中都测试得很好。相同的基本方法可用于纯 JavaScript。

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

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