两列自动高度背景颜色答案

【问题标题】：Two Columns Auto Height Background Colour两列自动高度背景颜色
【发布时间】：2018-05-19 14:54:03
【问题描述】：

我可能在这里遗漏了一些非常简单的东西。我有两列保持相同的高度，具体取决于哪个 div 里面有更多内容，但是背景颜色不会在较短的列上延伸；当使用媒体查询显示较小时，列会更改为垂直布局。 如何让左列的背景颜色延伸到div的底部？

#pageContainer {
        width: 100%;
        text-align: center;
    }
    
    #pageContainer p {
        line-height: 10px;
    }
    
    .sectionContainer {
        width: 80%;
        margin: 0 auto;
        display: table;
    }
    
    .leftColumn {
        display: table-cell;
        float: left;
        width: 50%;
        background-color: #4F4F4F;
        color: #FFFFFF;
    }
    
    .rightColumn {
        display: table-cell;
        float: left;
        width: 50%;
        background-color: #EEEEEE;
        color: #000000;
        
    }
    
    @media all and (max-width: 768px) {    
        .sectionContainer {
            width: 100%;
        }
        
        .leftColumn {
            width: 100%;
        }
        
        .rightColumn {
            width: 100%;
        }
    }

<div id="pageContainer">
  <div class="sectionContainer">
    <div class="leftColumn">
      <h1>Left Column</h1>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
    </div>
    <div class="rightColumn">
      <h1>Right Column</h1>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
    </div>
  </div>
</div>

我已经包含了一个 CodePen 来显示问题：https://codepen.io/Macast/pen/ZaZrNz

谢谢！

【问题讨论】：

标签： html css responsive-design html-table background-color

【解决方案1】：

擦除浮动（在表格中没有意义）以解决高度问题。然后在媒体查询中，将容器的display 更改为block，将两个内部元素更改为inline-block：

#pageContainer {
  width: 100%;
  text-align: center;
}

#pageContainer p {
  line-height: 10px;
}

.sectionContainer {
  width: 80%;
  margin: 0 auto;
  display: table;
}

.leftColumn {
  display: table-cell;
  width: 50%;
  background-color: #4F4F4F;
  color: #FFFFFF;
}

.rightColumn {
  display: table-cell;
  width: 50%;
  background-color: #EEEEEE;
  color: #000000;
}

@media all and (max-width: 768px) {
  .sectionContainer {
    display: block;
    width: 100%;
  }
  .leftColumn {
    display: inline-block;
    width: 100%;
  }
  .rightColumn {
    display: inline-block;
    width: 100%;
  }
}

<div id="pageContainer">
  <div class="sectionContainer">
    <div class="leftColumn">
      <h1>Left Column</h1>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
    </div>
    <div class="rightColumn">
      <h1>Right Column</h1>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
    </div>
  </div>
</div>

【讨论】：

这是最好的答案。当显示器缩小到移动尺寸时，这会删除任何多余的空白区域。太好了，谢谢！

【解决方案2】：

您可以使用display: flex; 代替display: table; 和float: left;。这将使孩子们的身高相等。

#pageContainer {
        width: 100%;
        text-align: center;
    }
    
    #pageContainer p {
        line-height: 10px;
    }
    
    .sectionContainer {
        width: 80%;
        margin: 0 auto;
        display: flex;
    }
    
    .leftColumn {
        flex-basis: 50%;
        background-color: #4F4F4F;
        color: #FFFFFF;
    }
    
    .rightColumn {
        flex-basis: 50%;
        background-color: #EEEEEE;
        color: #000000;
        
    }
    
    @media all and (max-width: 768px) {    
        .sectionContainer {
            width: 100%;
        }
        
        .leftColumn {
            width: 100%;
        }
        
        .rightColumn {
            width: 100%;
        }
    }

<div id="pageContainer">
  <div class="sectionContainer">
    <div class="leftColumn">
      <h1>Left Column</h1>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
    </div>
    <div class="rightColumn">
      <h1>Right Column</h1>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
    </div>
  </div>
</div>

【讨论】：

此解决方案适用于桌面网站，但不适用于移动网站。然而，另一个答案已经提交。感谢您的贡献！

【解决方案3】：

将height:100% 添加到sectionContainer 和leftColumn 类似乎可以解决这个问题。

#pageContainer {
        width: 100%;
        text-align: center;
    }
    
    #pageContainer p {
        line-height: 10px;
    }
    
    .sectionContainer {
        width: 80%;
        margin: 0 auto;
        display: table;
        height:100%;
    }
    
    .leftColumn {
        display: table-cell;
        float: left;
        width: 50%;
        background-color: #4F4F4F;
        color: #FFFFFF;
        height:100%;
    }
    
    .rightColumn {
        display: table-cell;
        float: left;
        width: 50%;
        background-color: #EEEEEE;
        color: #000000;
        
    }
    
    @media all and (max-width: 768px) {    
        .sectionContainer {
            width: 100%;
        }
        
        .leftColumn {
            width: 100%;
        }
        
        .rightColumn {
            width: 100%;
        }
    }

<div id="pageContainer">
  <div class="sectionContainer">
    <div class="leftColumn">
      <h1>Left Column</h1>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
      <p>Left Column</p>
    </div>
    <div class="rightColumn">
      <h1>Right Column</h1>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
      <p>Right Column</p>
    </div>
  </div>
</div>

【讨论】：