私のアプリケーションでCSSレイアウトの問題を満たし、jsFiddleで再現しました。そう、ヘッダーのdivが50px
で固定高さに設定されているCSS計算による高さ計算()計算方法
html,body {
height: 100%;
}
.header {
background: yellow;
height: 50px;
}
.main {
background: green;
height: calc(100% - 50px);
}
<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div>
<div class="main"></div>
、と私は、メインのdivは、残りの高さを占めることができるとします
基本的には、以下のように非常に簡単です私はcalc(100% - 50px)
を使用します。
しかし、結果は私には少し奇妙です。生成された高さは正確ではなく、垂直スクロールバーが生成されました。マージンやパディングを確認しましたが問題ありません。
私の望む結果は、ページ全体が2つの部分に分割されています。スクロールバーは生成されません。