将 HTML 页面分成水平部分，没有垂直滚动条答案

【问题标题】：Dividing HTML page into horizontal sections, without vertical scrollbars将 HTML 页面分成水平部分，没有垂直滚动条
【发布时间】：2014-07-16 12:19:56
【问题描述】：

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

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

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

我为main 尝试了margin-bottom: 50px;，但没有成功。我该怎么办？

【问题讨论】：

标签： html css layout

【解决方案1】：

“main”的高度应为 100% - 50px。这是fiddle。

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

【讨论】：

这解决了我的问题，但“以下功能存在风险，在 CR 期间可能会被丢弃：‘calc()’、‘toggle()’、‘attr()’。” CSS 值和单位模块级别 3 - w3.org/TR/css3-values
true，我建议您也应该以 % 为基础保留标题。例如 20% 的标题，80% 的正文。

【解决方案2】：

要使其在旧浏览器上运行，您可以使用绝对定位。

Demo

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

【讨论】：

【解决方案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：只有当浏览器小于 500 像素时，标题才会小于 50 像素（仅在某些横向移动设备中）

EXAMPLE

【讨论】：