CSS - 将页面水平分割成两半 [英] CSS - Horizontally splitting a page in half

问题描述

我试图将页面水平分成两半。我想通过HTML / CSS完成它，我不想使用JS。
我做错了什么？

I'm trying to have a page divided in half, horizontally. I want to accomplish it just by HTML/CSS and I'd prefer not to use JS. What am I doing wrong?

谢谢

#container {
min-height:100%;
}

#top_div {
height:50%;
width:100%;
background-color:#009900;
margin:auto;
text-align:center;
}

#bottom_div {
height:50%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}

HTML

HTML

<div id="container">

<div id="top_div">top</div>    
<div id="bottom_div">bottom</div>

</div>

推荐答案

试试这个：

body, html, #container {
  height: 100%;
}

这篇关于CSS - 将页面水平分割成两半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！