Question

我正在使用position:relative和top:-120px将标题背景图片移到两个标题<div/>下面，这很有效。然后，我必须将包装器<div/>和页脚<div/>设置为相对，并将它们向上移动120像素以正确排列。问题是页面底部现在在页脚下面有120像素的额外空间。有没有一种简单的方法来删除该空间？或者是否有使用CSS和position属性的不同方式来实现此结果？这是我的网站：

http://ledvideowall.net

Answer 1

以下是修复：

.wrapper {
    top: 0;
}
.site-header {
    margin-bottom: -120px;
}    
footer[role="contentinfo"]{
    top:0;
}

Answer 2

我打算说#headerbg不需要存在，但是我看到你正在使用图像来保持页面大小下降时页眉的高/宽比。
当我需要做这样的事情时，我根本不会在这种情况下定位“background-image”，而是制作包装position:relative和#headertop＆amp; #menubar position:absolute。这会使顶部和菜单脱离流程并使background image工作。

.site-header {
  position:relative;
  ...
}
#headertop {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 z-index:1;
...
}
#menubar {
 position:absolute;
 top:80px;
 left:0;
 width:100%;
 z-index:1;
 ...
}
#headerbg {
 display:block;
 height:auto;
 width:100%;
 /*
 position: relative;
 top: -120px;
 z-index: 0;
 */
}
#headerbg img {
 display:block;
 width:100%;
 height:auto;
}

Answer 3

您可以应用margin-bottom来恢复相对位置导致的效果：

footer[role="contentinfo"]{
    margin-bottom: -120px;
}

Answer 4

如果您故意将页脚向上移动120px，则可以执行此操作以移除其下方的空白区域。

footer[role="contentinfo"] {
    margin-bottom: -120px;
}

WordPress相对定位和页面高度CSS问题

4 个答案: