2017-01-16 33 views
0

私のアプリケーションで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つの部分に分割されています。スクロールバーは生成されません。

答えて

3

ブラウザによってデフォルトで設定されているmargin(約8px)があり、それを0にリセットします。

html,body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.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>

0

@Panglossは、上記の言うように、ブラウザが自動的にその問題を引き起こしてページに余白を追加します。 CSSのビルドプロセスでNormalize.cssを使用したり、<head>のCDNにリンクしたりすることは、ブラウザのさまざまな違いを防ぐために最適です。

関連する問題