如何使 DIV 宽度灵活到视口的宽度答案

【问题标题】：How to make DIV width be flexible UP TO the width of the viewport如何使 DIV 宽度灵活到视口的宽度
【发布时间】：2013-10-01 15:34:53
【问题描述】：

我有一个包含在 div 中的表格。

我的两个要求：

我可以通过display: table、display: inline-block 或display: inline-table 实现第一个要求。

我可以通过display: block实现第二个要求。

我看不出同时满足这两个要求。我已经尝试了 CSS3 中可用的所有显示选项，但没有一个能产生我所看到的结果。不使用javascript也可以吗？

【问题讨论】：

【解决方案1】：

将display: inline-block 放入容器div 就足够了，而留下overflow-x: scroll。我在这里叉了你的小提琴http://jsfiddle.net/khcQZ/

您是否在使用除您拥有的 div 之外的任何其他包含 div？

【讨论】：

是的，但只有典型的#wrapper 和#contents div。我认为是我在最后一分钟添加的 max-width: 100% 使它起作用。
是的，inline-block 的宽度取决于父级宽度，所以如果任何父级 div 没有设置任何宽度，那么它们将默认为 body 和 html 定义。根据具体情况，将 100% 的宽度（和/或高度）应用于 html、body 定义会有些用处，这样它们就会一直延伸到视口。 HTH！