私はブートストラップとWeb開発の新人です。私は常に16:9の長さと幅の比を維持する応答性の高いdivを作りたかったのです。この応答部分の上にヘッダーとフッターセクションがあります。しかし、ヘッダーセクションとフッターセクションはお互いに積み上げられています。どんな助けもありがとう。2つの部門が互いに積み重なっています。それを避ける方法は?
HTML
<div class="post-card-outer">
<div class="post-card-inner">
<div class="space-header">
</div>
<div class=" post-content">
<div class="col-sm-6 content-leftcol">
<div class="image-sec-post-card">
<img class = "image-post-card" src="3.jpeg">
</div>
</div>
<div class="col-sm-6 content-rightcol">
right
</div>
</div>
<div class="space-footer">
GGDYGDYGDYGDYGYDGDGYD
</div>
</div><!--post-card-inner-->
</div><!--post-card-outer-->
CSSまあ
.post-card-outer{
width: 100%;
padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/
position: relative;
background: coral;
margin-top:50px;
}
.post-card-inner{
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.space-header {margin-top:-10px; height:10px; background-color:red;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;}
.post-content{
min-height:100%; background-color:green;
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.content-leftcol{
background-color:black;
width:50%;
height:100%;
}
.content-rightcol{
background-color:blue;
width:50%;
}
.image-sec-post-card{
border:1px solid white;
vertical-align: middle;
overflow: hidden;
}
.image-post-card{
max-width:100%;
max-height:100%;
border:1px solid green;
}