Html 展开一个 div 以填充剩余的宽度

Expand a div to fill the remaining width

提问by Anurag Uniyal

I want a two-column div layout, where each one can have variable width e.g.

我想要一个两列的 div 布局，其中每个都可以有可变的宽度，例如

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

I want the 'view' div to expand to the whole width available after 'tree' div has filled needed space.

我希望在 'tree' div 填满所需空间后，'view' div 扩展到可用的整个宽度。

Currently, my 'view' div is resized to content it contains It will also be good if both divs take up the whole height.

目前，我的 'view' div 被调整为它包含的内容 如果两个 div 都占据整个高度也会很好。

---

---

Not duplicate disclaimer:

不重复免责声明：

• Expand div to max width when float:left is setbecause there the left one has a fixed width.
• Help with div - make div fit the remaining widthbecause I need two columns both aligned to left

• 设置 float:left 时将 div 扩展到最大宽度，因为左边的宽度是固定的。
• 帮助 div - 使 div 适合剩余的宽度，因为我需要两列都向左对齐

回答by Xanthir

The solution to this is actually very easy, but not at allobvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

这个问题的解决其实很容易，但不是在所有明显。你必须触发一个叫做“块格式上下文”（BFC）的东西，它以特定的方式与浮点数交互。

Just take that second div, remove the float, and give it overflow:hiddeninstead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

只需取出第二个 div，移除浮点数，然后给它overflow:hidden。除了可见之外的任何溢出值都会使其设置的块成为 BFC。BFC 不允许后代浮点数逃脱它们，也不允许兄弟/祖先浮点数侵入它们。这里的实际效果是浮动的 div 会做它的事情，然后第二个 div 将是一个普通的块，占用所有可用的宽度，除了被 float 占用的宽度。

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

这应该适用于所有当前浏览器，尽管您可能必须在 IE6 和 7 中触发 hasLayout。我不记得了。

Demos:

演示：

• Fixed Left: http://jsfiddle.net/A8zLY/5/
• Fixed Right: http://jsfiddle.net/A8zLY/2/

• 固定左：http: //jsfiddle.net/A8zLY/5/
• 固定权利：http: //jsfiddle.net/A8zLY/2/

回答by B T

I just discovered the magic of flex boxes (display: flex). Try this:

我刚刚发现了弹性盒的神奇之处（display: flex）。尝试这个：

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Flex boxes give me the control I've wished css had for 15 years. Its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex 框给了我 15 年来一直希望 css 拥有的控制权。它终于来了！更多信息：https: //css-tricks.com/snippets/css/a-guide-to-flexbox/

回答by Reggie Pinkham

Flexbox solution

弹性盒解决方案

This is what the flex-growproperty is for.

这就是flex-grow物业的用途。

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

Note:Add flex vendor prefixes if required by your supported browsers.

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

回答by cletus

This would be a good example of something that's trivial to do with tables and hard (if not impossible, at least in a cross-browser sense) to do with CSS.

这将是一个很好的例子，它与表格无关，而与 CSS 很难（如果不是不可能，至少在跨浏览器的意义上）。

If both the columns were fixed width, this would be easy.

如果两列都是固定宽度，这将很容易。

If one of the columns was fixed width, this would be slightly harder but entirely doable.

如果其中一列是固定宽度，这会稍微困难一些，但完全可行。

With both columns variable width, IMHO you need to just use a two-column table.

对于两列可变宽度，恕我直言，您只需要使用两列表格即可。

回答by angel.dimitrov

Check this solution out

检查这个解决方案

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

回答by joel Moses

Use calc:

使用calc：

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

The problem with this is that all widths must be explicitly defined, either as a value(px and em work fine), or as a percent of something explicitly defined itself.

这样做的问题是所有宽度都必须明确定义，或者作为一个值（px 和 em 工作正常），或者作为明确定义的东西的百分比。

回答by a6hi5h3k

Here, this might help...

在这里，这可能会有所帮助...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

回答by PatM

I don't understand why people are willing to work so hard to find a pure-CSS solution for simple columnar layouts that are SO EASY using the old TABLEtag.

我不明白为什么人们愿意如此努力地为使用旧TABLE标签很容易的简单柱状布局找到纯 CSS 解决方案。

All Browsers still have the table layout logic... Call me a dinosaur perhaps, but I say let it help you.

所有浏览器仍然具有表格布局逻辑......也许可以称我为恐龙，但我说让它帮助你。

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Much less risky in terms of cross-browser compatibility too.

在跨浏览器兼容性方面的风险也小得多。

回答by anit

If the width of the other column is fixed, how about using the calcCSS function working for all common browsers:

如果另一列的宽度是固定的，那么使用适用于所有常见浏览器的calcCSS 功能如何：

width: calc(100% - 20px) /* 20px being the first column's width */

This way the width of the second row will be calculated (i.e. remaining width) and applied responsively.

这样，第二行的宽度将被计算（即剩余宽度）并响应应用。

回答by A.Pramod Kumar

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum-nOne-Half">Tree</div>
    <div class="Colum-nOne-Half">View</div>
  </div>

</body>

</html>