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

Question

编辑:添加大量空白(只是一堆新行)解决了这个问题，虽然我觉得这有点中世纪，我正在尝试寻找更专业的解决方案。

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

但是我的页脚只是向下拍摄到页面底部(500 多个像素的空白空间)。

Answer 1

您可以执行 javascript 来添加与页脚高度相等的正文填充。您可以查看此 fiddle 以了解其工作原理 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'})

希望对您有所帮助!