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

Question

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

div {
  float: left;
}

.second {
  background: #ccc;
}

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

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

目前，我的“视图”div 的大小已调整为它包含的内容如果两个 div 占据整个高度也会很好。

不重复免责声明：

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

score 1069 · Accepted Answer

解决这个问题其实很简单，但一点也不明显。您必须触发称为“块格式化上下文”（BFC）的东西，它以特定方式与浮点数交互。

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

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

演示：

固定左：http: //jsfiddle.net/A8zLY/5/
修复正确：http: //jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

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

score 157 · Accepted Answer

我刚刚发现了弹性盒子的魔力（显示：弹性）。试试这个：

<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 box 给了我 15 年来我希望 css 拥有的控制权。它终于来了！更多信息：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 54 · Accepted Answer

使用CSS Flexbox 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>

score 28 · Accepted Answer

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

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

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

由于两列的宽度都是可变的，恕我直言，您只需要使用一个包含两列的表格。

score 23 · Accepted Answer

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

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

score 22 · Accepted Answer

检查此解决方案

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

score 15 · Accepted Answer

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

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

score 8 · Accepted Answer

如果另一列的宽度是固定的，那么如何使用适用于所有常见浏览器 calc的CSS 函数：

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

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

score 5 · Accepted Answer

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

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

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

就跨浏览器兼容性而言，风险也小得多。

score 3 · Accepted Answer

<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="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
  </div>

</body>

</html>

score 3 · Accepted Answer

你可以试试CSS 网格布局。

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

score 2 · Accepted Answer

flex-grow - 这定义了弹性项目在必要时增长的能力。它接受用作比例的无单位值。它规定了项目应该占用的弹性容器内的可用空间量。

如果所有项目都将 flex-grow 设置为 1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为 2，则剩余空间将占用其他空间的两倍（或者它会尝试，至少）。在这里查看更多

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

score 1 · Accepted Answer

我不确定这是否是您期望的答案，但是，为什么不将 Tree 的宽度设置为“auto”，将“View”的宽度设置为 100% 呢？

score 1 · Accepted Answer

帕特 - 你是对的。这就是为什么这个解决方案会同时满足“恐龙”和同时代人的原因。:)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

score 1 · Accepted Answer

一个稍微不同的实现，

两个并排的 div 面板（内容+额外），content panel如果extra panel不存在则展开。

jsfiddle：http: //jsfiddle.net/qLTMf/1722/

score 1 · Accepted Answer

您可以使用 W3 的 CSS 库，其中包含一个名为的类rest，它就是这样做的：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

不要忘记在页面中链接 CSS 库header：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

这是官方演示：W3 School Tryit Editor

score 1 · Accepted Answer

使用 flexbox 相当容易。请参阅下面的片段。我添加了一个包装容器来控制流量并设置全局高度。还添加了边框以识别元素。请注意，div 现在也根据需要扩展到全高。供应商前缀应该用于真实场景中的 flexbox，因为尚未完全支持。

我开发了一个免费工具来使用 flexbox 理解和设计布局。在这里查看：http: //algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

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

score 0 · Accepted Answer

查看可用的 CSS 布局框架。我会推荐Simpl或者稍微复杂一点的 Blueprint 框架。

如果您使用的是 Simpl（仅涉及导入一个simpl.css文件），您可以这样做：

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

，对于 50-50 布局，或：

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

, 对于 25-75 的一个。

就是这么简单。

score 0 · Accepted Answer

感谢 Simpl.css 的插件！

ColumnWrapper记得像这样包装你的所有列。

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

我即将发布 Simpl.css 的 1.0 版，所以请帮助宣传！

score 0 · Accepted Answer

我编写了一个从 jQuery $(document).ready() 调用的 javascript 函数。这将解析父 div 的所有子元素，并且只更新最右边的子元素。

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

score -6 · Accepted Answer

如果两个宽度都是可变长度，为什么不使用一些脚本或服务器端计算宽度？

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

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

21 回答 21

Related

Reference