0
私はおそらくここでは本当に簡単なものがありません。私は同じ高さを保持する2つの列を持っているが、divの中にはより多くの内容があるが、背景色は短い列には伸びない。メディアクエリを使用してディスプレイが小さくなると、列は垂直レイアウトに変わります。 左の列の背景色をdivの下まで延長するにはどうすればよいですか？2列の自動高さ背景色
#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
感謝を！
これは最高の答えです。これにより、ディスプレイがモバイルサイズに縮小されたときに余分な余白が削除されます。優れたありがとう！ – Macast