用 display:table-cell 填充可用空间答案

【问题标题】：Filling the available space with display:table-cell用 display:table-cell 填充可用空间
【发布时间】：2013-02-13 00:31:23
【问题描述】：

是否可以在不指定手动宽度的情况下，利用第二个div占据父div的可用空间？

这是试用版演示的Fiddle。

.right_cnt {
    display: table-cell;
    background:#FFC;
}

注意：我需要黄色框来占据可用的正确空间。

【问题讨论】：

从你的小提琴看来它已经占据了右边的可用空间，而且看起来你没有在任何地方手动指定宽度
这是你需要的东西吗：jsfiddle.net/JqHXJ/3 或者这个：jsfiddle.net/JqHXJ/4 或者这个：jsfiddle.net/JqHXJ/5

标签： html css displaytag tablecell

【解决方案1】：

在父元素上设置display:table; width: 100%;，从兄弟元素中删除float: left。 http://jsfiddle.net/byNpM/2/

【讨论】：

我没有发现任何区别。我需要那个黄色框来占据可用的右侧部分

【解决方案2】：

可以使用表格布局来做到这一点，但这不一定是最简单的方法：forked your fiddle to demonstrate。

更简单的方法是修改第二个单元格以删除所有表格显示属性并将第二个元素的overflow 设置为hidden：another fork demonstrating this。 zoom: 1 允许该技术在旧 IE 中工作。如果您对 overflow 的副作用感到满意，这对于您的目的可能会更简单

【讨论】：

"Forked your fiddle"... crikey.

【解决方案3】：

This post 可能就是您要找的。p>

特别看Xanthir's answer：

解决这个问题其实很简单，但一点也不明显。你必须触发一个叫做“块格式化上下文”的东西，它以特定的方式与浮动交互。 ... ...

【讨论】：

【解决方案4】：

在我看来，虽然 display:table-cell 在没有 width 的行中的最后一个 div 上会导致它拉伸以填充封闭的父 display:table div，但表格单元格有一个隐含的 'min- width' 行为无法关闭，强制其为其子元素的宽度。

我不得不求助于将左侧单元格绝对定位在 100% 宽的右侧单元格上的宽填充顶部。这样，当窗口变窄和内容滚动时，100% 宽的内部 div 会根据需要缩小。

http://jsfiddle.net/kmbro/cqkzbc4a/

【讨论】：

我应该读过 Danield 的回答 - 将 float:left 放在左侧 div 上，将 overflow:auto 放在右侧就可以了！小提琴已更新以进行演示。