Böyle bir şey yaratmaya çalışıyorum dikey kaydırma

Question

olmadan, yatay bölüme HTML sayfası bölmek:

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

Ve CSS:

http://jsfiddle.net/S6FUQ/

HTML olduğunu

* { 
    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; 
} 

İçinde üstte ince bir şerit var, ve ben yeniden bölmek istiyorum Ekranın iki eşit bölümüne bölünür, ancak dikey kaydırma çubuğunun görünmesini istemiyorum.

main için margin-bottom: 50px; denedim, ancak işe yaramadı. Ne yapmalıyım?

Answer 1

"Ana" yüksekliği% 100 - 50 piksel olmalıdır. İşte fiddle.

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

Answer 2

Zaten ayarı yapmak için% kullanıyorsanız ... Sorununuzu çözmek için neden tekrar kullanmıyorsunuz?

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

Not: tarayıcı (bazı manzara mobil cihazlarda yalnızca olacak olan) 500px daha küçüktür zaman başlık 50px daha küçük olacak tek zamandır

EXAMPLE

Answer 3

Eski tarayıcılarda çalışması için mutlak konumlandırma kullanabilirsiniz. ') Attr (' 'kalk()', 'geçiş()',:

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