展开div以填充剩余宽度
我想要一个两列的div布局，其中每个可以具有可变的宽度，例如
div {
float: left;
}
.second {
background: #ccc;
}<div>Tree</div>
<div class="second">View</div>我希望'view'div扩展到'tree'div填充所需空间后可用的整个宽度。
目前，我的“视图” div已调整为包含它的内容的大小，如果两个div都占据整个高度，那也会很好。
不可重复的免责声明：
第1945篇《展开div以填充剩余宽度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
A slightly different implementation,
Two div panels(content+extra), side by side, content panel expands if extra panel is not present.
jsfiddle: http://jsfiddle.net/qLTMf/1722/
flex-grow - This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least). See more 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>You can try 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><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>在这里，这可能会有所帮助...
<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>我不明白为什么人们愿意如此努力地为使用旧TABLE标记的简单列式布局找到纯CSS解决方案，因此非常容易。
所有浏览器仍然具有表布局逻辑...也许叫我恐龙，但是我说让它对您有帮助。
<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>在跨浏览器兼容性方面的风险也要小得多。
用途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正常工作），要么作为明确定义自身的百分比。
这就是该flex-grow属性的用途。
html, body {
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.second {
flex-grow: 1;
}<div class="wrapper">
<div style="background: #bef;">Tree</div>
<div class="second" style="background: #faa;">View</div>
</div>注意：如果支持的浏览器需要，请添加flex供应商前缀。
签出此解决方案
.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>这将是与表无关紧要的事情，并且与CSS很难（如果不是不可能的话，至少在跨浏览器的意义上）很难做到。
如果两列的宽度都是固定的，这将很容易。
如果其中一列是固定宽度，这将稍微困难一些，但完全可行。
由于两列的宽度都是可变的，恕我直言，您只需要使用两列表格即可。
这个问题的解决其实很容易，但不是在所有明显。您必须触发一种称为“块格式设置上下文”（BFC）的东西，它以特定的方式与浮点数交互。
只需占用第二个div，删除浮动对象，然后overflow:hidden改用它即可。除可见之外的任何溢出值都会使它设置的块成为BFC。BFC不允许子代浮动对象逃脱它们，也不允许同级/祖先浮动对象入侵它们。最终的效果是，浮动div将执行其操作，然后第二个div将是一个普通块，占用所有可用宽度，但不包括float占用的宽度。
尽管您可能必须在IE6和7中触发hasLayout，但它应该可以在所有当前浏览器上运行。我不记得了。
演示：
相似问题
问题类别
Thanks for the plug of Simpl.css!
remember to wrap all your columns in
ColumnWrapperlike so.I am about to release version 1.0 of Simpl.css so help spread the word!