CSS - 将页面水平分割成两半

Question

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

谢谢

CSS

#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

<div id="container">

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

</div>

Answer 1

试试这个：

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

Answer 2

尝试更改#container的第一个CSS块，就像这样

#container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

比容器有窗口高度和窗口宽度......

为了更好的解决方案，请对容器内的顶部和底部元素执行相同操作。将它们设置为位置，将所有top，left，...属性设置为零。顶部元素的底部为50％，底部元素的顶部为50％。

#top_div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50%;
    background-color:#009900;
    text-align:center;
}

#bottom_div {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    bottom: 0;
    background-color:#990000;
    text-align:center;
    color:#FFFFFF;
}

DEMO

Answer 3

如果我说得对，那么这就是你要做的： - 创建两个专栏页。

只需将一个div元素作为父元素和两个子div元素，分配位置：相对于父元素，因为这将使它成为容器和位置：绝对于子元素，使用宽度来指定特定区域。

Answer 4

视口单位！是，视口单位。 Supported by all browsers since IE9，不需要您为每个父容器设置height: 100%。

添加属性height: 50vh;只需将其大小设置为v iewport h八分之一的50％。

.top {
  height: 50vh;
  background-color: tomato;
}

.bottom {
  height: 50vh;
  background-color: brown;
}

<div class='top'></div>
<div class='bottom'></div>