使用display：table-cell填充可用空间

Question

是否可以利用第二个div来占用父div的可用空间而不指定手动宽度？

以下是试用版演示的Fiddle。

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

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

Answer 1

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

Answer 2

可以使用表格布局来执行此操作，但这不一定是最简单的方法：forked your fiddle to demonstrate。

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

的副作用感到满意，这对你的目的来说可能更简单

Answer 3

This post可能正是您所寻找的。

特别要看Xanthir's answer：

  

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

Answer 4

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

我不得不求助于将左侧细胞绝对定位在100％宽的右侧细胞上的宽衬垫上。这样，当窗口变窄并且内容滚动时，100％宽的内部div会根据需要缩小。

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