fiddle私は2つのdiv
が積み重なっており、それぞれの高さは50%
ですページのページの高さが50%の2つのdivのコンテンツのサイズを変更してください - CSS
これまではうまくいきましたが、それぞれdiv
の内部にheight: 250px
のプロパティを追加することにしました。この新しいケースでは、画面の高さが500px
より低くなると、divの内容は非表示になります。
要素<div id="top"></div>
と<div id="bottom"></div>
がdiv.new-content.centered
の高さを取得し、全体body
がオーバーフローすることにするようにする方法はありますか?最終的な結果は、<div id="top"></div>
と<div id="bottom"></div>
が新しい高さを維持し、ページ内の同じ位置を維持することを期待しています。
ご返信いただきありがとうございます!
body {
overflow: auto;
}
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.new-content {
height: 250px;
width: 25%;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
<div id="top">
<div class="new-content centered red"></div>
</div>
<div id="bottom">
<div class="new-content centered blue"></div>
</div>
は、私はあなたがCALC、高さを使用する必要があると思う:CALC(100% - 250ピクセル)。 ??? –
いいえ、各divの高さがページの50%でなければならないが、合計高さは '500px'でなければならず、両方の要素の高さを維持しながらボディ全体がオーバーフローするようにしてください –