CSS 如何使列自动将背景颜色填充到高度 100%

Question

我有以下代码：

#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的解决方案。

Answer 1

你可以在这里使用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>

Answer 2

需要了解为什么#left不需要height100%那是因为您在 #left 中使用了float:left属性。因此，每当在元素上使用浮点左时，默认情况下它都会将其显示更改为inline-block，这就是您必须更改父div 的显示以克服此问题的原因。

下面是使用 flex，

div{
display:flex;
}
div #left {
width: 180px;
background-color: #ff0000;
}
div #right {
flex:1;
overflow: hidden;
background-color: #00FF00;
}

<div>
<div id="left">
left
</div>
<div id="right">
right<br/> down
</div>
</div>

阅读本文以了解浮点数的工作原理。

Answer 3

.main-table {
display: table;
}
#left {
display: table-cell;
float: none;
width: 180px;
background-color: #ff0000;
}
#right {
display: table-cell;
overflow: hidden;
background-color: #00FF00;
}

<div class="main-table">
<div id="left">
left
</div>
<div id="right">
right<br/> down
</div>
</div>

在这种情况下，像桌子这样的东西可能会帮助你！！