如何使 div 填充剩余的水平空间

Question

我有两个 div。一个向左浮动，一个向右浮动。左侧的宽度设置为 18%，最小宽度为 217px。我想让右边的 div 占据剩余空间，同时也能够调整大小以适应窗口。

我遇到的问题是我可以将右 div 的宽度设置为 82% 并向右浮动，这一直有效，直到我使窗口侧太小，在这种情况下，左 div 的最小宽度开始并它停止收缩。右边的 div 没有足够的空间放不下，所以被往下推了。

这是一些示例代码。

HTML

    <div id="div1">
       stuff inside of it
    </div>
    <div id="div2">
       stuff inside of it
    </div>

CSS

    #div1
    {
     float: left;
     width: 18%;
     height: 100vh;
     min-width: 130px;
     box-shadow: 0px .3em .2em #000;
     z-index: 2;
    }

    #div2
    {
     width: 82%;
     float: right;
     z-index: 1;
    }

所以这就是我卡住的地方，我应该如何修复 div2？我尝试使用表格而不是 div，但是在我无法更改的单元格周围出现了一个边框，并且它删除了我的框阴影，所以我更喜欢没有它的解决方案。

Answer 1

您对使用表格的想法在某种程度上是正确的，因为表格元素确实具有许多使它们能够做到这一点的属性，但是正如人们在 cmets 中指出的那样，它不再是一种有效的使用方法用于非表格数据布局的表格元素。

这就是为什么 CSS 实现了一组样式规则来反映这些独特的属性。您可以使用样式display: table; 围绕两个元素设置一个容器，然后为其子项设置样式display: table-cell;

将右侧 div 的宽度设置为 100% 将确保它始终填充可用空间。

但是，由于表格单元格在内容超出表格宽度时不能换行，所以它会自动调整以适应。因此，当另一个 div（左侧）具有特定的最小宽度时，右侧的 div 会被分配更少的空间以保持单元格被包含在内。

这是使用您的代码的示例：

http://jsfiddle.net/Q5rjL/

CSS 表格显示属性为您提供了这些独特元素的所有好处，但没有语义问题。它们非常适合其他样式显示类型不足的复杂布局。

Answer 2

您还可以使用 overflow:hidden 包含浮点数：

#div2{
  overflow:hidden;
  z-index: 1;
}

DIV 将填满剩余空间 (http://jsfiddle.net/MAjwt/)