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

Posted 2023-03-06

技术标签:

【中文标题】展开一个 div 以填充剩余的宽度【英文标题】：Expand a div to fill the remaining width 【发布时间】：2010-11-18 14:37:10 【问题描述】：

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

div 
  float: left;


.second 
  background: #ccc;

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

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

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

不重复免责声明：

Expand div to max width when float:left is set 因为左边的宽度是固定的。 Help with div - make div fit the remaining width 因为我需要两列都左对齐

【问题讨论】：

相关***.com/a/22719552/759452 要么我不明白这个问题，要么我不明白你如何选择接受的答案，因为宽度和高度都是固定的，不便overflow hidden 【参考方案1】：

这个问题的解决方案实际上非常简单，但并不是全部显而易见。您必须触发一种称为“块格式化上下文”（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>

【讨论】：

优秀的答案！但是当您说“除 auto 之外的任何溢出值”将使其成为 BFC 时，您就错了。您的意思是 default （可见）以外的任何溢出值都会使其成为 BFC。事实上，overflow auto 也可以完美运行——这就是我推荐的（以防万一你有相对定位的元素可能会从那个 div 中窥视）。这篇文章有一个很好的解释：colinaarts.com/articles/the-magic-of-overflow-hidden 如果内容大到溢出div怎么办？重要的是要注意，孩子的顺序很重要。具有固定宽度的浮动元素必须高于另一个元素。我花了太长时间才弄清楚，为什么它对我来说没有用切换顺序。我写了一个答案，解释了为什么所有事物的不可见溢出都会触发 BFC，基于大卫和鲍里斯给出的回答，可以在这里找到：***.com/questions/9943503/…我的解释正确吗？ 【参考方案2】：

我刚刚发现了弹性盒子的神奇之处（显示：弹性）。试试这个：

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

【讨论】：

我不知道你发现了什么，但你的代码在最新的 Chrome jsfiddle.net/fjb548kw/3987654322@ 中不起作用 @YevgeniyAfanasyev 我删除了“float:left;”解决问题。感谢您的来信！谢谢。你能解释一下为什么你有flex-grow: 100;而不是flex-grow: 1;吗？ @YevgeniyAfanasyev 没有什么特别的原因，只是我喜欢这样做。它让我可以用百分比来思考，所以如果我可以设置 #a 为 flex-grow:10，然后我将 #b 设置为 flex-grow: 90，那么 #a 将是线条宽度的 10%，而 #b 将是 90线宽的 %。如果没有其他元素具有 flex 宽度样式，那么从技术上讲，您放什么并不重要。【参考方案3】：

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

【讨论】：

【参考方案4】：

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

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

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

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

【讨论】：

表格在响应式设计中不是很好，但您希望右侧列在小型设备上滑动到左侧下方。有一些响应式设计技巧可用于表格：css-tricks.com/responsive-data-tables 我现在倾向于完全设计两个独立的布局，并使用媒体查询和display:none;在移动设备上进行更改，同时尽可能地在滑动范围内实现 100% 响应，有时更改设计会更好完全适用于使用触摸屏感觉和按钮样式的移动设备。【参考方案5】：

看看这个解决方案

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

【讨论】：

这通常是一个更好的解决方案，因为并不总是需要隐藏溢出。 Per OP：“我想要一个两列的 div 布局，每个布局都可以有可变宽度”。在你的回答中，你必须知道第一列的宽度，所以它不是可变的。您不妨在两列上设置固定宽度并浮动它们。【参考方案6】：

使用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 工作正常），要么作为明确定义自身的百分比。

【讨论】：

这样做的好处是它适用于输入类型字段，而评分最高的评论不会。最佳答案。适用于所有情况【参考方案7】：

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

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

【讨论】：

+1 因为您的示例似乎有效，但在我的真实场景中，一些来自“视图”的内容如何爬入“树”div，因为树 div 不是 100%，可能是一些 javascript 强制它要小，在树的高度之后，我会看到视图内容在这种情况下，如果你知道左列的最大宽度，你可以给它一个样式 max-width （在 IE 中不起作用）或者考虑 margin-left （注意IE 上的双倍边距错误）或 padding-left。这太棒了！我使用它作为一次性解决方案：

&lt;div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"&gt;&lt;/div&gt;

【参考方案8】：

如果另一列的宽度是固定的，如何使用calc CSS函数working for all common browsers：

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

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

【讨论】：

这是使用 flexbox 以外的任何东西的最佳答案，例如 css-grid。也适用于position: fixed，这使它成为完美的选择！谢谢！【参考方案9】：

我不明白为什么人们愿意如此努力地为简单的列式布局找到一个纯 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>

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

【讨论】：

是的，但如果一切都由 css 完成，为什么不这样做，至少是好奇，如果它是可能的？那是因为如果你想把media-queries 放在小型设备中的两列之上，旧的table 标签是不可能的。要使其正常工作，您需要应用CSS 表格样式。因此，对于现在来说，如果您想要任何屏幕尺寸的响应式布局，最好使用CSS 解决这个问题。【参考方案10】：

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

【讨论】：

我想要一个状态栏，左边是固定项目，右边是固定项目，一个消息行使用所有剩余空间。我从这个答案开始，并在浮动之后添加了我的消息 div：height: 20px;空白：nowrap；溢出：隐藏；文本溢出：剪辑【参考方案11】：

你可以试试CSS Grid Layout。

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>

【讨论】：

【参考方案12】：

一个稍微不同的实现，

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

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

【讨论】：

【参考方案13】：

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

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

【讨论】：

css 类 .ip 没有 html 参考，它在 IE7 中不起作用【参考方案14】：

您可以使用 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>

别忘了在页面的header链接CSS库：

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

这是官方演示：W3 School Tryit Editor

【讨论】：

看起来只是添加了“溢出：隐藏”，这使它成为已经给出的答案的更糟糕的版本【参考方案15】：

使用 flexbox 相当容易。请参阅下面的 sn-p。我添加了一个包装容器来控制流量并设置全局高度。还添加了边框以识别元素。请注意，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>

【讨论】：

在添加之前您是否阅读了所有以前的答案？好像没有…… 作为旁注，你不需要添加stretch，因为它是默认值，不需要使子元素伸缩容器，所以display:flex对于内部元素是没有用的跨度> 我想知道为什么投反对票，没有任何评论。这个答案不是在回答问题吗？为什么？如果试图帮助他人受到惩罚，我会在下一个答案之前三思而后行，你在投反对票后得到了两个 cmets，这还不够吗？手鞠，你检查过我的工具吗？你不觉得有用并且可以帮助别人吗？您认为与问题无关吗？你对这个问题的答案在哪里？我看不到它。你在这里的角色是什么？【参考方案16】：

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

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

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

【讨论】：

在您的示例中，两个 div 都会增长并填充剩余空间。问题要求一个 div 不增长，另一个填充剩余空间。【参考方案17】：

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

【讨论】：

因为它太宽了，所以会将第二个浮动放在第一个下方。【参考方案18】：

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

如果您使用的是 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 的人。

就这么简单。

【讨论】：

两列的宽度会变吗？【参考方案19】：

感谢 Simpl.css 的插件！

记得像这样将所有列包装在ColumnWrapper 中。

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

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

【讨论】：

【参考方案20】：

我编写了一个从 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"));
            
        );
    );

【讨论】：

【参考方案21】：

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

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

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

【讨论】：

服务器如何知道客户端的布局引擎将如何工作？简单：为 90% 的浏览器开发它 :) IE 7+、FF3+ 和 Safari 支持 CSS 3。您还可以包含标准 IE6

以上是关于展开一个 div 以填充剩余的宽度的主要内容，如果未能解决你的问题，请参考以下文章

展开 div 以包含绝对定位的内容

使 div 展开以占用所有可用空间 [重复]

HTML/CSS：将浮动左元素扩展到父元素的剩余宽度

如何让 div 填充剩余的水平空间？

样式输入元素以填充其容器的剩余宽度

如果未填充所有字段，如何选择字段集、展开以及更改类？