Html 垂直填充%

我试图将我的主页分成两个区域，一个在上面（白色），另一个在下面（黑色）

该页面旨在以50%的比例垂直分割，效果良好

两个区域都有一个标题，白色区域位于顶部（标题应位于底部），而黑色区域位于其上方。这样，两个标题就位于页面的中心

我唯一的问题是，我找不到一个办法来降低上区的头衔。 最快的方法是使用padding top和a%，但这样，padding将导致页面宽度的%，而不是页面高度的%

你知道怎么解决这个问题吗

HTML

---

非常感谢

您需要将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：

注意：在处理百分比高度时，确保主体始终跨越html高度的100%也是明智的（尽管它似乎在没有这个的情况下也可以工作）：

---

使“a”标记的父div

position:relative;

而“a”标记则是他们自己

position:absolute;

firat“a”应该是

bottom: 0;

第二个呢

top:0;

---

为了你的第一个头衔

Html（添加）

---

您是否尝试过

位置：绝对

和

底部：0

？作为最后的手段，您可以将标题制作成图像并将其定位为背景图像。。。背景：白色url（title1.png）无重复中心底部@斯文。是的，我试过了，但问题不是背景中的颜色，而是顶部标题“建筑”，应该在白色区域的下部。这就是我现在被卡住的地方…这是可行的，但不是为了标题“建筑”，它应该在白色区域的下部。这是我的问题。。。

position:absolute;

bottom: 0;

top:0;

  <div class="white-div"> <p><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></p>

    </div>

.white-div p {
  text-align:center;
  width:500px;
  position:absolute;
  bottom:0;
  right : 50% ;
  margin-right:-250px;

}

p{margin:0;padding:0;}