CSS 的粘滞页脚错误答案

【问题标题】：Sticky Footer Error with CSSCSS 的粘滞页脚错误
【发布时间】：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>

【问题讨论】：

如果您希望页脚位于页面底部并且不向上移动对页面内容的引用，请在下面查看我的答案

标签： html css footer sticky

【解决方案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;
}

.wrap{width: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-wrap{width: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
并检查我在说什么