将 HTML 页面分成水平部分，没有垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19239331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dividing HTML page into horizontal sections, without vertical scrollbars
提问by Mehdi Emrani
I'm trying to create something like this:
我正在尝试创建这样的东西：
HTML is:
HTML是：
<div id="container">
<header></header>
<main>
<section class="half"></section>
<section class="half"></section>
</main>
</div>
And CSS is:
而 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;
}
In it, I have a thin ribbon at the top, and I want to divide the rest of the screen into two equal sections, but I don't want vertical scrollbar to appear.
其中，我在顶部有一条细丝带，我想将屏幕的其余部分分成两个相等的部分，但我不希望出现垂直滚动条。
I tried margin-bottom: 50px;for main, but it didn't work. What should I do?
我试过margin-bottom: 50px;了main，但没有奏效。我该怎么办？
回答by Hiral
回答by Oriol
回答by Thanos
You are already using % to set height... Why don't you use it again to solve your problem?
您已经在使用 % 来设置高度...为什么不再次使用它来解决您的问题？
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: The only time your header is going to be smaller than 50px is when the browser is smaller than 500px (which will be only in some landscape mobile devices)
PS：标题小于 50px 的唯一时间是浏览器小于 500px（仅在某些横向移动设备中）
