Div填充剩余水平空间

Question

我有以下代码：

我有以下代码：

<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>

图片

这三个元素，一个ul和两个div，被排成一行，并且它们的宽度是动态的。我必须让这三个元素适应固定宽度为1200像素的父级div.parent。

目前，我正在使用“float: left;”来将这三个元素侧边对齐，如果需要，我可以使用“display: inline-block;” [效果完美]。但是，我尝试使用“display：table;”和“display：table-cell;”来进行父级和这三个元素之间的布局，但没有成功。

我需要填充黑色div.fill中剩余的空间。有什么想法吗？

编辑2：http://jsfiddle.net/cAs9t/

- Paulo Mu

---

尝试在你的CSS中使用这个：.fill{width:100%} - Zzyrk

请同时发布相关的CSS，或者更好的方法是创建一个Fiddle。 - otinanai

我已经尝试过了，但它获取的是.parent的宽度，而不是剩余的宽度。 - Paulo Mu

"display: block;" 不起作用。 - Paulo Mu

看到你的方法，用你的方法解决这个问题会很有趣，但我认为在width上使用％并且放弃float:left会是更好的解决方案。所以我建议你设置.parent{width:100%}，然后将.parent内每个div的宽度除以3（因为你的.parent内有三个div）...或者你可以根据每个div的内容进行计算。 - Simo D'lo Mafuxwana

Answer 1

演示

只需添加

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

在IT技术中，float: none可以去掉浮动（同时也可以避免将.fill应用float: left），overflow: hidden（或其他与visible不同的属性）可以防止浮动元素重叠.fill。

其他方法：

• 你可以使用display: table-cell和display: table，但无法指定哪个元素应该扩展以填满所有剩余空间。

• 但是，如果你想要完全控制并以更复杂的方式分配剩余空间，你应该使用Flexboxes。

- Oriol

---

使用float:none和overflow:hidden完美地工作，非常感谢！ - Paulo Mu

@PauloMu 如果 Oriol 的答案适合你，你应该接受它！这是 SO 的全部意义。 - otinanai

我之前没有想到使用overflow:hidden作为解决方案（它非常有效！）。有人能否稍微详细地解释一下，为什么这个属性会导致这种效果？ - DBK

@DBK 如果您查看http://jsfiddle.net/Q4p8C/，可能会理解正在发生的事情。 - Oriol

Answer 2

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

您可以设置前两个子元素的宽度，并留下最后一个没有指定宽度，以便它填充父容器。 请参见此演示。

- otinanai

---

谢谢您的帮助，但是使用"display: table;"和"display: table-cell"只会将白色空间从div.fill移动到div.something。我猜这是因为浏览器试图使所有"display: table-cell"元素的宽度相等。 - Paulo Mu

Answer 3

使用display:table作为容器，使用display:table-row作为其直接子元素。

对于高度可变的div，设置height:0，对于应填充剩余空间的div，设置height:auto。

如果容器需要固定高度，无论是像素还是百分比，您可以在水平填充器中添加一个单独的div，并在其中添加内容{overflow-y:auto; 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>

- clearfix

Answer 4

Flexbox解决方案

注意：如果您的支持的浏览器需要，添加flex供应商前缀。

.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>

- Reggie Pinkham