我有以下代码：
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}<div>
<div id="left">
left
</div>
<div id="right">
right<br/> down
</div>
</div>我想要实现的是使左列background-color填充整个div. 无论#right柱的高度如何，都应该是这种情况。
到目前为止我已经尝试/添加
display: flex;
height: 100%
flex 1;
到#left风格，但它不起作用。
这必须是仅 CSS 的解决方案。
你可以在这里使用 flexbox。演示：
.container {
/* become a flex-container */
/* flex-items will be stretched vertically by default */
display: flex;
}
#left {
width: 180px;
background-color: #ff0000;
}
#right {
/* occupy remaining width */
flex: 1;
background-color: #00FF00;
}<div class="container">
<div id="left">
left
</div>
<div id="right">
right
<br/> down
</div>
</div>您也可以在此处使用 CSS 网格布局。演示：
.container {
/* become a grid-container */
display: -ms-grid;
display: grid;
/* first column should occupy 180px and second should occupy remaining width */
-ms-grid-columns: 180px 1fr;
grid-template-columns: 180px 1fr;
}
#left {
background-color: #ff0000;
}
#right {
background-color: #00FF00;
/* specify column for IE/Edge explicitly */
-ms-grid-column: 2;
}<div class="container">
<div id="left">
left
</div>
<div id="right">
right
<br/> down
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句