将HTML页面划分为水平部分,没有垂直滚动条

Question

我正在尝试创建这样的东西:

http://jsfiddle.net/S6FUQ/

HTML是:

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

CSS是:

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

在其中,我在顶部有一条细带,我想将屏幕的其余部分分成两个相等的部分,但我不希望出现垂直滚动条.

我试过margin-bottom: 50px;了main,但它没有用.我该怎么办？

Answer 1

"主要"的高度应为100% - 50px.这是小提琴.

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