粘性页脚隐藏内容

我为粘性页脚制作了以下CSS，但是我面临的问题是，当内容与滚动一起溢出时，会有一些内容隐藏在页脚后面（请参阅附加屏幕截图）。请让我知道我该如何解决这个问题，所以粘脚应该坚持底部填充一定比例的顶部或类似物，并且内容不应该隐藏。粘性页脚隐藏内容

enter image description here

CSS：

.fo { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height:65px; 
    width: 100%; 
    color: #eaeaea; 
    margin-left: -8px; 
}

来源

2012-12-14 soft genic

你已经给你的页脚65px的高度。只要给你的内容div保留一个65px的底部，一切都很好 –

@SvenBieder就是这种情况 –

我碰到这个答案就出来了，过去在互联网上。伟大的作品：

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>

CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 
/* IE 6 and down: 
#container { 
    height:100%; 
}

来源

2012-12-14 17:12:42 kthornbloom

这对我来说非常合适。当内容很短时，页脚停留在屏幕的底部，随着内容的扩展，页脚移动并且仍然在屏幕的底部而不与文本重叠。 – aspnetdeveloper

很抱歉，如果这是太旧了，但我想出了合作的很好，我的解决方案！我创建了一个清晰的div，并给它一个高度。

.clear { clear: both; height: 60px; } 

<div class="clear"></div> 
<div id="footer">FOOTER CONTENT</div>

身高是无论你需要保持页脚上的内容，例如，比页脚高。如果页脚是50px;高大，我做60px;为清晰的div中的高度。所以当我滚动时，页脚停留在原位，但当我到达页面底部时，从页脚后面流出的内容有空间被推到页脚之上而不被覆盖。超级简单，而且工作完美。也许有人可以纠正我，如果这有什么问题，比如某种类型的冲突。对不起，这是一个较旧的帖子，但我觉得我可以添加到这个，因为我自己发现这个帖子寻找一个解决方案。

来源

2013-08-03 21:04:49 Greg

当我想出我自己的解决方案时，我遇到了麻烦。我把我的页脚有10%的height：

footer{ 
    position: fixed; 
    **height:10%;** 
    width:100%; 
    padding-top: 2px; 
    bottom: 0; 
    clear: both; 
    background-color: black; 
    color: white; 
    float: left; 
    overflow: auto; 
}

和我的内容有11%的bottom margin：

#content{ 
    width: 800px; 
    margin: auto; 
    background-color: rgba(0,0,0,.7); 
    color: #99FFCC; 
    height: 80%; 
    padding:30px; 
    **margin-bottom: 11%;** 
}

我希望这有助于人谁有同样的问题！

来源

2015-12-17 21:34:19 Sarah

-2

我刚刚在正文文本的末尾添加了5次br标签以创建一些额外的空白区域。它帮助了我。

有时保持它简单的作品！

来源

2016-12-14 16:12:46 Vik

我有同样的问题，其他的解决方案我指出了正确的方向，但因为我采用了棱角分明材料都是我所要做的就是添加布局=“列”和它的工作很大

<div id="container" layout="column"> 
     <div id="header"></div> 
     <div id="body"></div> 
     <div id="footer"></div> 
    </div>

来源

2017-11-17 23:46:18

粘性页脚隐藏内容

回答

相关问题