2013-10-08 47 views
6

垂直スクロールバーなしで、水平セクションに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;を試しましたが、機能しませんでした。私は何をすべきか?

答えて

17

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

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

これは私の問題を解決しましたが、「次の機能は、アット・リスクであり、CR期間中に落下することができる 'CALC()'、 'トグル()'、 'のattr()' " CSSの値と単位モジュールレベル3 - http://www.w3.org/TR/css3-values/ –

+0

本当に、ヘッダーも%ベースで保持することをお勧めします。例えば、20%のヘッダー、80%の身体の残りの部分。 – Hiral

3

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

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

4

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

Demo

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

なぜdownvote?古いブラウザでもうまくいきます... – Oriol

関連する問題