Javascript CSS - 将页面水平分成两半
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14201594/
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
CSS - Horizontally splitting a page in half
提问by delete me
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?
我正在尝试将页面水平分成两半。我只想通过 HTML/CSS 来完成它，我不想使用 JS。我究竟做错了什么？
Thanks
谢谢
CSS
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
HTML
<div id="container">
<div id="top_div">top</div>
<div id="bottom_div">bottom</div>
</div>
回答by jamesplease
Try this:
尝试这个：
body, html, #container {
height: 100%;
}
回答by algorhythm
try to change your first CSS-block for #containerlike this
尝试#container像这样改变你的第一个 CSS 块
#container {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
than the container has window-height and window-width...
比容器具有窗口高度和窗口宽度...
For a better solution do the same with the top and bottom elements inside the container. Set them to position and all top, left,... properties to zero. For the top element set bottom to 50% and for the bottom element set top to 50%.
为了更好的解决方案，对容器内的顶部和底部元素执行相同的操作。将它们设置为 position 并将所有 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;
}
回答by Shashi
If i got you right then here is what you are trying to do:- Create two column page.
如果我猜对了，那么这就是您要执行的操作：- 创建两列页面。
Just take one div element as parent and two child div elements, assign position:relative to parent as this will make it container and position:absolute to children elements,use width to assign specific area.
只需将一个 div 元素作为父元素和两个子 div 元素，将 position:relative 分配给 parent，因为这将使其成为容器和 position:absolute 到子元素，使用宽度分配特定区域。
回答by Creaforge
Viewport units!Yes, viewport units. Supported by all browsers since IE9, doesn't require you to set height: 100%to every parent container.
视口单位！是的，视口单位。自 IE9 以来的所有浏览器都支持，不需要您设置height: 100%每个父容器。
Adding the property height: 50vh;will simply size it to 50% of the viewport height.
添加该属性height: 50vh;只会将其大小v调整为h8的iewport 的50% 。
.top {
height: 50vh;
background-color: tomato;
}
.bottom {
height: 50vh;
background-color: brown;
}<div class='top'></div>
<div class='bottom'></div>