底部粘页脚不重叠
Posted
技术标签:
【中文标题】底部粘页脚不重叠【英文标题】：Sticky footer on bottom without overlapping 【发布时间】：2017-01-21 23:51:37 【问题描述】：我试图让页脚粘在页面底部。 如果内容很小，页脚应该在浏览器的底部。内容和页脚之间的空间应该是空的。
我尝试了各种方法，但页脚仍然在内容的正下方，而不是在浏览器的底部。
这是我的代码
<div id="content">
<a href="item.html">
<div class="col-xs-12 col-md-6 col-lg-3 item">
<div class="opacity"></div>
<div class="box_bg">
<h4 class="color1">Headline</h4>
<p>Description</p>
</div>
</div>
</a>
<a href="item.html">
<div class="col-xs-12 col-md-6 col-lg-3 item">
<div class="opacity"></div>
<div class="box_bg">
<h4 class="color1">Headline</h4>
<p>Description</p>
</div>
</div>
</a>
</div>
<footer class="bar bar-tab">
<a class="tab-item" href="#">
Home
</a>
</footer>
CSS：
#content
min-height: 100%;
footer
height: 50px;
position: relative;
bottom: 0;
【问题讨论】：
Problems with CSS sticky footer的可能重复 经典 -> ryanfait.com/sticky-footer 【参考方案1】：如果我明白你想要什么，你需要让你的页脚位置：固定；并将 padding-bottom 添加到您的容器中。
正文将位于页脚后面，因此您需要比页脚高度稍大的填充。
https://jsfiddle.net/c0Lrcg4s/
#content
min-height: 100%;
padding-bottom:60px;
footer
height: 50px;
position: fixed;
bottom: 0;
你可以使用 position: absolute;但是，这不会正常工作页脚，因为它的相关容器将是视口，然后将随着屏幕滚动。
【讨论】：
非常感谢！但是当内容较大时，页脚会覆盖内容。 确保将 padding-bottom 添加到内容的最外层包装中。【参考方案2】：尝试将您的 css 更改为将页脚定位为 absolute：
footer
height: 50px;
position: relative;
bottom: 0
Codepen 演示：http://codepen.io/anon/pen/NRxQQP
【讨论】：
【参考方案3】：如果您将页脚的位置设置为固定，它将保持在使用 top 和 left 属性进行固定的相同位置。
footer
height: 50px;
**position: fixed;**
bottom: 0;
【讨论】：
【参考方案4】：您可以使用 jQuery 来做到这一点，因为您需要“窗口”的高度。 在 jQuery 中你可以写：
var height = $(window).height();
$("#content-wrapper").css(height : height);
当然，您可以降低页脚和页眉的高度，以便在打开页面时看到页脚。
获取此高度变量的最佳方法是在 .resize() fincton 中。
然后在css中可以设置：
#content-wrapper
position:relative;
.footer
position: absolute;
bottom: 0;
.footer 和 #content 应该在 #content-wrapper 内
【讨论】：
【参考方案5】：这是我的解决方案 (JSFiddle)：
<!DOCTYPE html>
<html>
<head>
<title>Sticky footer example</title>
<meta name="viewport" content="width=device-width, initial-scale=.75,user-scalable=yes">
<meta charset="UTF-8">
<style>
HTML
min-height:100%;
margin:0
BODY
position:relative;
min-height:calc(100vh - 125px);
margin:0;
padding:0 0 125px;
background-color:lightyellow;
.highbar
position:relative;
min-height:calc(100vh - 125px);
max-width:600px;
background-color:cyan;
margin:0 auto;
.lowbar
position:absolute;
height:125px;
bottom:0;
width:100%;
background-color:#345995;
color:white;
</style>
</head>
<body>
<div class="highbar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat vulputate commodo. Aenean venenatis posuere mi id laoreet. Proin pretium dolor vulputate, efficitur eros congue, iaculis mi. Suspendisse dignissim neque in dapibus dignissim. Donec elementum erat rhoncus neque blandit maximus. Nulla facilisi. Ut arcu mi, fringilla ac nisi et, egestas porta est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
<br><br>
Duis iaculis dui id mi dictum, vel lobortis velit fermentum. Nulla est arcu, pellentesque ac risus vitae, iaculis consequat enim. Vivamus condimentum, ex sit amet sagittis tempus, ex sapien interdum magna, et luctus ante dolor quis erat. Fusce et lorem eget nibh mattis pharetra. Mauris in faucibus lectus, hendrerit sagittis nisi. Donec scelerisque consequat dolor in pharetra. Sed in velit erat.
<br><br>
Aenean eget enim nec eros scelerisque tempor cursus sit amet urna. Praesent dignissim neque id posuere fermentum. Duis varius enim non leo ultricies fringilla. Suspendisse commodo nisi libero, id volutpat ligula mollis eu. Nam lacinia dui et nisi varius aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit rutrum nisl, placerat finibus arcu malesuada sit amet. Mauris nec pellentesque tortor. Nulla facilisi. In egestas dolor in molestie lacinia. Nullam dignissim maximus dolor a aliquet. Fusce sed leo a nisi lobortis sagittis id vitae nisi. Curabitur nibh diam, scelerisque in luctus sed, sagittis in quam. Quisque dignissim molestie ante eu eleifend. Duis hendrerit aliquam neque, nec luctus urna egestas nec.
</div>
<div class="lowbar">
Phasellus ac rutrum quam. Mauris eget consectetur felis, id elementum ligula. Phasellus molestie nulla nec leo semper vulputate. Sed id metus non arcu rutrum pretium non eu sapien. Integer eget mauris non mauris lobortis luctus. Suspendisse non est lacinia lacus sollicitudin consequat. Sed sodales euismod ultricies. Etiam urna magna, malesuada vitae aliquam at, sodales sed arcu. Nullam maximus libero id nisl accumsan blandit.
</div>
</body>
</html>
【讨论】：
以上是关于底部粘页脚不重叠的主要内容，如果未能解决你的问题，请参考以下文章