我可能在这里遗漏了一些非常简单的东西。我有两列保持相同的高度,具体取决于哪个 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
谢谢!
最佳答案
删除 float (在表格中毫无意义)以解决高度问题。然后在媒体查询中,将容器的 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>
关于html - 两列自动高度背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47662203/