8

我正在尝试将页面水平分成两半。我只想通过 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>
4

4 回答 4

10

尝试这个：

body, html, #container {
  height: 100%;
}
于 2013-01-07T18:17:46.577 回答
7

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

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

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

要获得更好的解决方案，请对容器内的顶部和底部元素执行相同的操作。将它们设置为位置，并将所有顶部、左侧、... 属性设置为零。对于顶部元素，将底部设置为 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;
}

演示

于 2013-01-07T18:17:41.860 回答
1

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

添加该属性height: 50vh;只会将其大小调整为viewport h8 的 50%。

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

.bottom {
  height: 50vh;
  background-color: brown;
}
<div class='top'></div>
<div class='bottom'></div>

于 2019-05-27T08:41:09.773 回答
0

如果我说得对，那么这就是您要尝试做的事情：-创建两列页面。

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

于 2013-01-07T18:48:22.023 回答