CSS 的粘滞页脚错误
Posted
技术标签:
【中文标题】CSS 的粘滞页脚错误【英文标题】：Sticky Footer Error with CSS 【发布时间】：2017-02-23 05:21:52 【问题描述】：我已经尝试了所有方法，但似乎无法让页脚粘在底部。
我一直在搬东西，可能代码有点乱了。
我很满意它在更长（更多内容）页面上的表现。但它在内容较少的页面上给了我很多空白。
我们将不胜感激！
@charset "UTF-8";
*
margin: 0;
/* Body */
html, body
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
/* Text */
h1
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
h2
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
p
margin-top: 1;
text-align: center;
line-height: 150%;
/* Container */
.container
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
/* Navigation */
header
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
nav
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
nav a
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
a:hover
background: #312f47;
color: white;
nav a:first-child
display: none;
.current
color: #9390A6;
/* Images */
.gallery
margin-bottom: 100px;
height: 100%;
.photos
max-width: 50%;
.contact
display: block;
margin: auto;
margin-top: 50px;
/* Google Maps */
.google-maps
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
.google-maps iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.video
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
.video iframe
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
/* Footer */
footer
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: relative;
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
</footer>
</body>
</html>【问题讨论】：
如果您希望页脚位于页面底部并且不向上移动对页面内容的引用，请在下面查看我的答案 【参考方案1】：页脚标签之间没有文字，这就是为什么看不到页脚的原因，如果添加背景颜色会更清晰。
例如，您应该将 class="site-footer" 添加到 html 页脚标记。
<footer class="site-footer">
The Footer.
</footer>
以及 CSS 文件中的类定义：
.site-footer
height: 120px;
background: red;
您也可以使用link作为参考。
【讨论】：
【参考方案2】：我将它用于页脚，它与我完美配合：
html,body,ul,a,li
margin:0;
padding:0;
border:0;
outline:none;
vertical-align:top;
height:100%;
text-decoration:none;
.wrapwidth:100%;
min-height:100%;
height: auto !important;
height:100%;margin:0 auto;
display:block;
background:lightblue;
footer
bottom:0px;
display:block;
width:100%;
height:auto;
#fo-wrapwidth:100%;
height:100px;
background-color:#FF2E99;<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrap'>
here every thing in page
</div>
<footer>
<div id='fo-wrap'>
here footer content
</div>
</footer>
</body>
</html>【讨论】：
【参考方案3】：为.content 添加相对于视口的最小高度。
从它减少110px（padding-bottom：50px；margin-top：10px；页脚高度：50px）
footer
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
@charset "UTF-8";
*
margin: 0;
/* Body */
html, body
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
/* Text */
h1
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
h2
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
p
margin-top: 1;
text-align: center;
line-height: 150%;
/* Container */
.container
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
/* Navigation */
header
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
nav
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
nav a
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
a:hover
background: #312f47;
color: white;
nav a:first-child
display: none;
.current
color: #9390A6;
/* Images */
.gallery
margin-bottom: 100px;
height: 100%;
.photos
max-width: 50%;
.contact
display: block;
margin: auto;
margin-top: 50px;
/* Google Maps */
.google-maps
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
.google-maps iframe
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.video
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
.video iframe
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
.container
min-height: calc(100vh - 110px)
/* Footer */
footer
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
width: 100%;
background-color: #ccc;
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
My footer
</footer>
</body>
</html>【讨论】：
如果你使用了位置：固定浏览器页面的页脚棒底部不在真正的底部 在你想要一个“真正的底部”的问题中并不清楚。你是什么意思？ “真正的底部”是指在 的正下方？ 对不起，这不是我的问题，我的意思是在你的回答中，页脚贴在浏览器底部，它相对于视口定位，这意味着即使页面滚动，它也始终保持在同一个位置 @mohade 再次检查我的答案 好的，去 jsfiddle 复制你的代码，然后在 下添加 test 并检查我在说什么以上是关于CSS 的粘滞页脚错误的主要内容，如果未能解决你的问题，请参考以下文章