为什么我的页脚没有停留在页面底部？答案

【问题标题】：Why is my Footer is not Staying at Bottom of Page?为什么我的页脚没有停留在页面底部？
【发布时间】：2015-05-25 18:09:50
【问题描述】：

由于某种奇怪的原因，我的页脚出现在我页面内容的后面，不再是正确的高度，我似乎无法修复它。我尝试了其他答案，但没有一个有效。这个可以查看here.有人有什么想法吗？

.reviewwidget {
	width: 45%;
	margin-bottom: 25px;
	float: left;
}

.reviews {
	width: 55%;
	float:right;
}

.single-review {
	position: relative;
	width:55%;
	float:right;
}

.quotation {
   position: relative; 
   width: 50px; 
   z-index:500;
}

.quotationend {
   position: relative; 
   float:right;
   width: 50px; 
   z-index:400;
   margin-top:-10px;
}

.single-review p {
  position: relative; 
  z-index: 550;
  margin-top: -20px;
  font-size:16px;
  font-style: italic;
}

Footer {
    background-color: #0b1b23;
	color: #ececec;
	padding: 5%;
	font-family: centrale_sans_regularregular, helvetica;
	position:relative;
}

【问题讨论】：

标签： html css wordpress footer

【解决方案1】：

您的#container 元素有浮动内容，未清除，导致#container 的高度塌陷。您应该阅读浮动和 clearfix，但这里有两个解决方案 from this thread：

可重用的 clearfix 类添加到#container 元素（推荐）：

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

又快又脏：

#container { overflow: auto; }

【讨论】：

【解决方案2】：

问题在于浮动元素。您必须在 html 代码中的页脚元素之前放置一个 clearfix 块，或者添加具有 clearfix 样式的伪元素，就像 iqnivek 说的那样。

【讨论】：

【解决方案3】：

并不是您的页脚没有停留在页面底部。你的类“single-review”具有float-right的属性，它悬停在页脚上（导致它自动缩放高度）。

尝试从 .single-review 中删除浮动，这将修复您的页脚。

但是你需要将你的页面内容放入一个包装器中以保持你的元素在适当的位置，否则一切都会继续拉出和重叠

【讨论】：

【解决方案4】：

如下更改您的容器：

#container {   display: table-cell; }

这样它就不会干扰您的页脚放置。

【讨论】：

那些对这个答案投了反对票的人，想解释一下我的解决方案有什么问题吗？