html - 垂直填充 %

Question

我想把我的主页分成两个区域，一个在上面(白色)，另一个在下面(黑色)。

该页面旨在以 50% 的比例垂直划分，并且效果很好。

两个区域都有一个标题，顶部的白色区域(应该在底部有标题)而下面的黑色区域应该有标题在它的上侧。这样两个标题就在页面的中央。

我唯一的问题是我找不到降低上层区域标题的方法。最快的方法是使用 padding-top 和一个 %，但这样填充会导致页面宽度的 % 而不是页面高度。

你知道如何解决这个问题吗？

HTML

<div>

<div style="height:50%; width:100%; background-color:#FFFFFF">
<a href="http://www.lorenzomeschini.com/architecture"; onMouseOver="this.style.color='#FCB415'" onMouseOut="this.style.color='#cccccc'" style="text-align:center; font-family:Tahoma, Geneva, sans-serif; color:#dddddd; font-size:19px; letter-spacing:0.22em; height:100%">architecture</a>
</div>

<div style="position: absolute; bottom:0;width:100%;height:50%">
<a href="http://www.lorenzomeschini.com/photography"; onMouseOver="this.style.color='#FCB415'" onMouseOut="this.style.color='#cccccc'" style="text-align:center; font-family:Tahoma, Geneva, sans-serif; color:#cccccc; font-size:19px; letter-spacing:0.21em; height:100%">photography</a>
</div>

</div>

</body>

CSS

body {
background-color: #1E1E1E;
margin: 0;
padding: 0;
color: #919191;
font-family: "Courier New", Courier, monospace;
font-size: 13px;

非常感谢

Answer 1

您需要position: absolute div 并将一个放在顶部，一个放在底部，然后它应该可以工作。像这样:

.white-div {
    height: 50%;
    width: 100%;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
}
.black-div {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
}

jsfiddle:http://jsfiddle.net/4qhQg/

注意:在处理百分比高度时，确保正文始终跨越 html 高度的 100% 可能也是明智的(尽管它似乎也可以在没有此高度的情况下工作):

html {
    min-height:100%;
    position:relative
}
body {
    height:100%
}