Question

编辑：添加大量的空白区域（只是一堆新行）解决了这个问题，虽然我觉得这有点 medieval 而我正在努力寻找更专业的解。

http://juniorgoldreport.com/about-us/ - 如果你向下看右下角（页脚/最近的帖子）就是一个例子。

我知道这是一个position:absolute问题，这就是原因，但我无法找到解决方法。在线人员有类似的问题，我已经找到并尝试了他们的解决方案，但即使在与他们一起玩之后，我也能够解决它。这是我能找到的最接近的解决方案：

#main {
overflow: hidden; /* needed to stretch parent container since children are floated */
}

#primary.content-area {
width: 68%;
float: left;
}

.site-main .sidebar-container {
position: static;
float: right;
width: 30%;
height: auto;
}

.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {

padding: 0;
}

但是我的页脚只是向WAYY拍摄到页面底部（空白区域的500多个像素）。

Answer 1

你可以用javascript来添加身体等于页脚高度的填充。您可以查看这个小提琴，看看它是如何工作的Codepen here

HTML：

<div class="content">
  <h1>Here content</h1>
</div>
<div class="footer">
 <h4>FOOTER</h4>
</div>

CSS：

body,html{
  height: 100%;
  position: relative;
}
.content{
  min-height: 100%;
  background: green;
}
.footer{
  position:absolute;
  bottom: 0;
  left: 0;
  background: red;
  width: 100%;
  z-index: 9;

}

JS：

// getting footer height
var footerHeight = jQuery('.footer').height();

// add padding for body equals with footerHeight
jQuery('html,body').css({'padding-bottom': footerHeight + 'px'})

我希望这对你有帮助！

侧边栏重叠在页脚 - 在wordpress中创建的网站

1 个答案: