Question

我有以下代码：

＆＃13;

#left {
  float: left;
  width: 180px;
  background-color: #ff0000;
}

#right {
  overflow: hidden;
  background-color: #00FF00;
}

＆＃13;

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

＆＃13;

我想要实现的是让左栏background-color填满整个div。无论#right列的高度如何，都应如此。

到目前为止，我已尝试/添加了

display: flex;
height: 100%
flex 1;

以#left样式但它无效。

这必须是仅限CSS的解决方案。

Answer 1

需要了解为什么#left不需要height 100%，因为您在#left中使用了float: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>

阅读本文以了解float的工作原理。

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

在这种情况下，像桌子这样的东西可以帮助你!!

Answer 3

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

css如何使列自动填充背景颜色到高度100％

3 个答案: