保持页脚到底部(css)
保持页脚到底部(css)
提问于 2016-09-30 11:35:08
这似乎是一个流行的问题，但即使在吸收了一些建议之后，我也没有得到想要的结果。
我有一个页脚，我希望它在页面的底部。这是我的HTML和CSS：( hi‘只是占位符内容)
HTML：
<body>
<ul>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
</ul>
<div class="navbar navbar-default footer">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#"> Blog </a></li>
<li> <a href="#"> Terms of use </a></li>
<li><a href="#"> Contact us </a></li>
</ul>
<a href="#" class="navbar-btn btn-info btn pull-right">
<i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
</div>
</div>
</body>CSS：
.footer {
bottom:0;
position: absolute;
width:100%;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
height:100%;
min-height: 100%;
}现在，如果我有.footer样式的position: absolute;，那么页脚在页面加载时位于底部，当您向下滚动时，页脚保持在相同的位置。它还与内容重叠，这可以从fiddle here中看出
如果我删除了position: absolute属性，那么页脚就不在页面的底部，而是直接位于前一个元素的下面。请看这里，了解我的意思LINK
我希望它在页面的底部。如果age上的内容很少，那么它应该一直到底部，如果在页脚之前有很多内容，那么它不应该重叠并在所有内容下面。jQuery解决方案也很好。
回答 7
Stack Overflow用户
发布于 2016-09-30 11:39:28
按如下方式更新您的css
检查jsbin Link to Jsbin中的输出
.footer {
position:relative;
top:225px;
}
.footer {
position:relative;
top:225px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
height:100%;
min-height: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
</ul>
<div class="navbar navbar-default footer">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#"> Blog </a></li>
<li> <a href="#"> Terms of use </a></li>
<li><a href="#"> Contact us </a></li>
</ul>
<a href="#" class="navbar-btn btn-info btn pull-right">
<i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2016-09-30 12:01:25
我有更新代码来检查这个，
CSS
.footer {
bottom:0;
position: fixed;
width:100%;
margin-bottom: 0 !important;
}
.content {
position: relative;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
height:100%;
min-height: 100%;
}HTML
<div class="content">
<ul>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
<li> Hi </li>
</ul>
<div>
<div class="navbar navbar-default footer">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#"> Blog </a></li>
<li> <a href="#"> Terms of use </a></li>
<li><a href="#"> Contact us </a></li>
</ul>
<a href="#" class="navbar-btn btn-info btn pull-right">
<i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
</div>
</div>
</div>bootply
Stack Overflow用户
发布于 2016-09-30 12:14:40
看看克里斯·布拉科的this wonderful CodePen吧，它会解决你的问题。
/**
* Demo Styles
*/
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39783255
复制相关文章
相似问题
腾讯云开发者
