Html 将页面分成两半（顶部和底部）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10886927/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 00:50:32 来源:igfitidea点击:
split a page into 2 halfs(top and bottom)
提问by JNPW
I want to split a page into 2 halves(not as a column) but as a row(top and bottom) and give 2 colors one for top and one for bottom.
我想将一个页面分成两半（不是作为一列）而是作为一行（顶部和底部）并给出两种颜色，一种用于顶部，一种用于底部。
回答by Vladimir Starkov
demo on dabblet.com
dabblet.com 上的演示
html:
html：
<div id="top">top</div>
<div id="bottom">bottom</div>
css:
css：
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
回答by Raab
Demo:Jsfiddle
演示：Jsfiddle
HTML
HTML
<body>
<div style="height:100%">
<div class="topdiv">top div</div>
<div class="bottomdiv">bottom div</div>
</div>
CSS
CSS
body {margin:0;padding:0;height:100%;}
div.topdiv {clear:both;position:fixed;top:0;height:50%;width:100%;background-color:#990000;color:#FFFFFF;font-size:16px;text-align:center;}
div.bottomdiv {clear:both;position:fixed;bottom:0;height:50%;width:100%;background-color:#009900;color:#FFFFFF;font-size:16px;text-align:center;}?
