2017-10-16 17 views
1

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>

+0

は、私はあなたがCALC、高さを使用する必要があると思う:CALC(100% - 250ピクセル)。 ??? –

+0

いいえ、各divの高さがページの50%でなければならないが、合計高さは '500px'でなければならず、両方の要素の高さを維持しながらボディ全体がオーバーフローするようにしてください –

答えて

1

私はflexを使用するようにレイアウト戦略を変更しました。また、左右の余白をautoに設定することで、内側divの中央に配置します。これで問題が解決するかどうか確認してください。

UPDATE

追加された溶液は、ブロックが垂直中心できるように、JavaScriptを使用してコンテンツブロックのオフセットトップマージンを計算します。

var els = document.getElementsByClassName('new-content'); 
 

 
verticalCenterContent = function() { 
 
    for (i = 0; i < els.length; i++) { 
 
    var containerHeight = els[i].parentNode.offsetHeight; 
 
    var topOffset = containerHeight/2 - els[i].offsetHeight/2; 
 
    if (topOffset > 0) { 
 
     els[i].style.marginTop = topOffset + 'px'; 
 
    } 
 
    else { 
 
     els[i].style.marginTop = 0 + 'px';  
 
    } 
 
    } 
 
} 
 

 
window.onresize = function(event) { 
 
    verticalCenterContent(); 
 
}; 
 

 
verticalCenterContent();
body { 
 
    overflow: auto; 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
.container { 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 

 
#top, 
 
#bottom { 
 
    flex: 1 1 50vh; /* shorthand for flex-grow flex-shrink flex-basis */ 
 
} 
 

 
#top { 
 
    background-color: orange; 
 
} 
 

 
#bottom { 
 
    background-color: green; 
 
} 
 

 
.centered { 
 
    margin: 0 auto 0 auto; 
 
} 
 

 
.new-content { 
 
    height: 250px; 
 
    width: 25%; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
}
<div class="container"> 
 
    <div id="top"> 
 
    <div class="new-content centered red"></div> 
 
    </div> 
 
    <div id="bottom"> 
 
    <div class="new-content centered blue"></div> 
 
    </div> 
 
</div>

+0

返信ありがとう@ jfefermanは、ページの上部に積み重ねるのではなく、親div内の中央にある 'new-content'クラスのdivを作る方法がありますか? –

+0

回答の更新をご覧ください。 – jfeferman

+0

ありがとうございますが、高さは '250px'となっています。値を変更すると、もはやセンターには残りません。他のアイデア? –

関連する問題