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

编辑：添加大量的空白（只是一堆新的线）解决了这个问题，虽然我觉得这是有点中世纪，我试图找到更专业的解决方案。侧边栏重叠在页脚 - 在wordpress中创建的网站

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+像素）。

来源

2016-05-16 Robolisk

也许使用'position：fixed'将页脚固定到底部，并使用z-index将它移到侧栏上方。 – TricksfortheWeb

另外，你有没有检查过你的导航下拉菜单是如何反应的？这不是你唯一的问题。 – TricksfortheWeb

@TricksfortheWeb我会看看位置：固定解决方案。我只是担心这会影响所有其他页面（这是可以的），当我试图解决有关页面的问题。我明白你对导航栏下拉的含义，你指的是它如何重叠？ – Robolisk

你可以做一个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'})

我希望这可以帮助你！

来源

2016-05-16 20:44:49

我不得不离开我的电脑，但是当我回来时，我会看看这个。它看起来很有趣，谢谢！我会回顾这个潜在解决方案的工作原理。 – Robolisk

如果页脚具有固定的高度并且不依赖于页脚中有多少内容，则可以像这样设置来自CSS的body填充。 .body {padding-bottom：footer_height px} –

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

回答

相关问题