私はこのようなものを作成しようとしている

Question

垂直スクロールバーなしで、水平セクションにHTMLページを分割：

<div id="container"> 
    <header></header> 
    <main> 
     <section class="half"></section> 
     <section class="half"></section> 
    </main> 
</div> 

とCSSは次のとおりです：

http://jsfiddle.net/S6FUQ/

HTMLがある

* { 
    margin: 0; padding: 0; 
} 
html, body, #container { 
    height: 100%; 
} 
header { 
    height: 50px; 
    background: gray; 
} 
main { 
    height: 100%; 
    background: green; 
} 
.half { 
    height: 50%; 
} 
.half:first-child { 
    background: blue; 
} 
.half:last-child { 
    background: yellow; 
} 

私は上部に薄いリボンがあります。 stを2つの等しいセクションに分割しますが、縦スクロールバーを表示したくありません。

mainについてはmargin-bottom: 50px;を試しましたが、機能しませんでした。私は何をすべきか？

Answer 1

"main"の高さは100％〜50pxである必要があります。ここにはfiddleがあります。

main{height: calc(100% - 50px);} 

Answer 2

すでに％を使用して高さを設定しています...問題を解決するためにもう一度使用しないでください。

header { 
    height: 10%; 
    background: gray; 
    max-height:50px; //this will ensure your header will never go bigger than 50px 
} 
main { 
    height: 90%; 
    background: green; 
} 

PS：ブラウザが500pxなどよりも小さいときに、あなたのヘッダーには50pxよりも小さくなるように起こっているだけの時間がある（唯一のいくつかの風景のモバイルデバイスになります）

EXAMPLE

Answer 3

古いブラウザでも動作させるには、絶対位置指定を使用できます。

Demo

#container { 
    position: relative; 
} 
main { 
    position: absolute; 
    width: 100%; 
    top: 50px; 
    bottom: 0; 
    background: green; 
}