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/

注意：在处理百分比高度时，确保身体始终跨越100％的html高度也是明智的（尽管它似乎也没有这个效果）：

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

Answer 2

制作'a'标签的父div

position:relative;

和'a'标记themsleves

position:absolute;

'a''应该是

bottom: 0;

和第二个

top:0;

Answer 3

你的第一个冠军

Html（添加

）

  <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>

CSS

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

}

p{margin:0;padding:0;}

Codepen

垂直填充％

3 个答案: