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>

- rudyStock

---

你尝试过添加 body, html{height:100%} 吗？ - Ricardo Castañeda

尝试将body和html的高度设为100％。 body，html {height：100％;} - bitWorking

Answer 1

试试这个：

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

- jamesplease

---

@Matt 它获取父容器100%的高度，但是父容器（在这种情况下是body）没有100%的高度。除了一些IE的版本。 - algorhythm

嗯，但你发布的CSS应该将父元素的高度设置为100％，而它确实做到了。我只是想知道，当你已经设置了最小高度时，为什么还需要为#container设置高度？http://jsfiddle.net/TQQWV/ - Matt Zeunert

嗯，这有点奇怪。在没有 #container 的情况下，两个子元素的高度不正确。但是 Chrome 的检查器显示容器的高度为100%（突出显示整个 iframe）。当我在容器上设置 height: 100% 时，两个子元素会扩展。 - Matt Zeunert

@Matt 我认为将高度或最小高度设置为100%并不是最好的解决方案。因为一些旧版IE无法正确解释它。通常 { height: 100%; } 意味着使用父容器的100％作为元素的高度。IE有时会使用窗口高度。因此，您可以将容器 { position: absolute; } 和 { top, left, right, bottom } 设置为零。该元素现在锚定在窗口边界上。它具有100％的高度和宽度。 - algorhythm

@Matt 请参考这里：http://stackoverflow.com/questions/9860888/min-height100-doesnt-work-on-my-container - algorhythm

Answer 2

尝试将你的第一个CSS块 #container 改为以下内容

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

比容器拥有窗口高度和宽度更好的解决方案是对容器内的顶部和底部元素执行相同操作。将它们设置为position，所有的 top、left 等属性设置为零。 对于顶部元素，将bottom设置为50％，对于底部元素，将top设置为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

- algorhythm

---

顺便提一句，对于任何尝试进行不对称分割的人，例如80%的上部/20%的下部：#top_div { bottom: 20% }和#bottom_div { top: 80% }。 - Bob Stein

Answer 3

视口单位！ 是的，视口单位。自IE9以来所有浏览器都支持，不需要您在每个父容器中设置height: 100%。

只需添加属性height: 50vh;即可将其大小调整为视口高度的50%。

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

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

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

- GuCier

Answer 4

如果我理解正确，那么您想要做的是：创建两列页面。

只需将一个div元素作为父元素，两个子div元素作为其子元素，将position:relative分配给父元素，这将使其成为容器，并将position:absolute分配给子元素，使用width来指定特定区域。

- Shashi