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

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

div {
float: left;
}


.second {
background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

我想要“视图”div扩展到整个可用的宽度后，“树”div已经填补了所需的空间。

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

不可重复声明:

485641 次浏览
小开

我不确定这是否是你所期待的答案，但是，为什么不将树的宽度设置为“自动”和“视图”的宽度设置为100% ?

小开

这将是一个很好的例子，说明用表处理起来很简单，而用CSS处理起来很难(如果不是不可能的话，至少在跨浏览器的意义上)。

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

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

两个列的宽度可变，恕我直言，你只需要使用一个两列的表。

小开

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

# EYZ0

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

看看现有的CSS布局框架。我推荐Simpl或者稍微复杂一点的Blueprint框架。

如果你使用的是Simpl(只需要导入一个simpl.css文件)，你可以这样做:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

，以进行对半布局，或:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

25-75美元。

就是这么简单。

小开

给，这个可能会有帮助……

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

小开
最佳答案

这个问题的解决方案实际上非常简单，但在所有上并不明显。你必须触发一个叫做“块格式化上下文”的东西。(BFC)，它以特定的方式与漂浮物相互作用。

只需要第二个div，删除浮动，并给它overflow:hidden代替。任何不可见的溢出值都会使它所设置的块成为BFC。bfc不允许后代浮体逃离它们，也不允许兄弟姐妹/祖先浮体入侵它们。这里的净效果是浮动的div将做它的事情，然后第二个div将是一个普通的块，占用所有可用的宽度除了被花车占用的空间。

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

演示:

div {
float: left;
}


.second {
background: #ccc;
float: none;
overflow: hidden;
}
<div>Tree</div>
<div class="second">View</div>

小开

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

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

小开

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

小开 

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

小开

看看这个解决方案

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

小开

一个稍微不同的实现，

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

jsfiddle: # EYZ0

小开

我刚刚发现了伸缩盒的魔力(显示: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盒子给了我15年来一直希望css能给我的控制。终于到了!更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

小开

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

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

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

小开

使用# EYZ0:

.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可以)，要么作为显式定义本身的内容的百分比。

小开

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

小开

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

超文本标记语言

...
<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"));
}
});
});
}
小开

你可以使用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学校Tryit编辑器

小开

您可以尝试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>

小开
这是相当容易使用flexbox。请参阅下面的代码片段。我添加了一个包装容器来控制流和设置全局高度。还添加了边界以标识元素。注意，div现在也会根据需要展开到全高度。 供应商前缀应该在现实场景中用于flexbox，因为它还不完全支持 我开发了一个免费的工具来理解和设计使用flexbox的布局。看看这里: # EYZ0 < / p > 

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

小开

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>

小开 

.container{
display: flex;
align-items: stretch;
}
.resize_overflow {
position: relative;
width: 0;
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
/* text-overflow: ellipsis; When the end of the line dissolves, the ellipsis loses */
}
.second_fix {
float: right;
/* or:
display: flex;
align-self: end;*/
}
/* Dissolve the end of the line at the right edge */
.resize_overflow::after {
content: ""; /* Empty content */
position: absolute; /* Position relative to parent */
right: 0; /* Element position */
top: 0; /* Element position */
width: 40px;  /* Gradient width */
height: 100%; /* Parent Height */
background: -moz-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -o-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: -ms-linear-gradient(left, rgba(255,255,255, 0.2), #ff 100%);
background: linear-gradient(to right, rgba(255,255,255, 0.2), #ff 100%);
}
<div class="container">
<div class="resize_overflow">Tree</div>
<div class="second_fix">View</div>
</div>


提交答案