【问题标题】：Div fill remaining horizontal spacediv填充剩余的水平空间
【发布时间】：2016-11-06 17:30:13
【问题描述】：

我有以下代码：

<div class="parent">
    <ul class="menu">
        <li>this</li>
        <li>width</li>
        <li>is</li>
        <li>dynamic.</li>
    </ul>

    <div class="something">
        <span>so is this</span>
        <table>because of this table.</table>
    </div>

    <div class="fill">
        <span>and so is this. but this guy needs to fill the remaining width.</span>
    </div>
</div>

Image

这 3 个项目 - ul 和 2 个 div - 并排对齐，如您所见，它们具有动态宽度。我必须让这 3 个项目适合 div.parent，宽度固定为 1200px。

目前，我正在使用 'float: left;'并排对齐这 3 个项目，我可以使用 'display: inline-block;'如有必要[完美工作]。但我尝试使用一些技巧与“显示：表；”对于父级和“显示：表格单元格；”对于这 3 项，没有成功。

我需要填充黑色 div 上的剩余空间，即“div.fill”。有什么想法吗？

EDIT2：http://jsfiddle.net/cAs9t/

【问题讨论】：

尝试在你的css中使用这个：.fill{width:100%}
请同时发布相关的css，或者更好地制作一个小提琴。
我试过了，但它从 .parent 获取宽度，而不是剩余宽度..
试试.fill{display: block}
'显示：块；'也不行。'

标签： css html

【解决方案1】：

Demo

只需添加

div.fill { float: none; overflow: hidden; }

float: none 删除浮动（您也可以避免将float: left 应用于.fill），overflow: hidden（或与visible 不同的任何内容）防止浮动元素重叠.fill。

其他方式：

您可以使用display: table-cell 和display: table，但您无法指定应该增长哪个元素来填充所有剩余空间。
但是如果你想要完全控制并且想要以更复杂的方式分配剩余空间，你应该使用Flexboxes。

【讨论】：

与 float:none 和 overflow: hidden 完美配合，非常感谢！
@PauloMu 如果适合您，您应该接受 Oriol 的回答！这就是 SO 的全部意义所在。
我不会想到使用 overflow:hidden 作为解决方案（效果很好！）。有人可以更详细地解释一下为什么这个属性会导致这种效果吗？
@DBK 如果你看到jsfiddle.net/Q4p8C，也许你会明白发生了什么

【解决方案2】：

我将父 display:table 和 3 个孩子设为 display:table-cell。现在所有 3 个子元素都填充了父元素的宽度，您不需要浮动它们中的任何一个。这种方法的一个优点是您可以使用vertical-align，并且还可以避免在父级短于内容时对块进行换行。在某种程度上，你得到了table 的所有好处。

你可以设置前 2 个子元素的宽度，最后一个不指定宽度，这样它会填满父容器。

See this demo.

【讨论】：

感谢您的帮助，但使用 'display: table;'并且“显示：表格单元”只是将空白从 div.fill 错位到 div.something。我猜这是因为浏览器试图等于所有“显示：表格单元”元素的宽度。

【解决方案3】：

对容器使用 display:table，对其直接子级使用 display:table-row。

为具有可变高度的 div 设置 height:0，为应该填充剩余空间的 div 设置 height:auto。

如果容器需要固定高度，无论是像素还是百分比，您都可以使用 {overflow-y:auto; 添加单个 div； height:100%} 到水平填充并在其中添加内容。

<div style="height:300px; border:1px solid red;padding:2px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
        I take as much space as needed
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px">My parent will fill the remaining space</div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      <p>I take as much space as needed as well</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

弹性盒解决方案

注意：如果您的supported browsers 需要，请添加弹性供应商前缀。

.parent {
  width: 1200px;
  display: flex;
}
.menu {
  margin: 0;
}
.menu li {
  display: inline-block;
}
.fill {
  flex-grow: 1;
}

<div class="parent">
  <ul class="menu" style="background: #6cf">
<li>this</li>
<li>width</li>
<li>is</li>
<li>dynamic.</li>
  </ul>
  <div class="something" style="background: #fd6">
<span>so is this</span>
<table>because of this table.</table>
  </div>
  <div class="fill" style="background: #5c5">
<span>and so is this. but this guy needs to fill the remaining width.</span>
  </div>
</div>

【讨论】：