如何使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

您使用表的想法在某种程度上是正确的，因为表元素实际上确实具有使它们具有这种能力的许多属性，但是正如人们在注释中指出的那样，将表元素用于以下用途已不再是一种有效的方法。非表格数据布局的目的。

这就是CSS实施一组样式规则以反映这些独特属性的原因。 您可以使用样式display: table;围绕两个元素设置一个容器display: table; ，然后为孩子提供样式display: table-cell;

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

但是，由于当内容超出表的宽度时表单元格无法中断到新行，因此它将自动进行调整以适合。 因此，当另一个div（左侧的div）具有特定的最小宽度时，右侧的div会被分配较少的空间以保持单元格的容纳。

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

http://jsfiddle.net/Q5rjL/

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

Answer 2

您也可以包含带有float overflow:hidden浮点数：

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

DIV将填充剩余的空间（ http://jsfiddle.net/MAjwt/ ）