Question

由于一些奇怪的原因，我的页脚出现在我页面上的内容后面，不再是正确的高度，我似乎无法解决它。我尝试了其他答案，但没有一个能够奏效。这可以查看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;
}

Answer 1

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

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

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

又快又脏：

#container { overflow: auto; }

Answer 2

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

Answer 3

并非您的页脚不会停留在页面底部。你的班级＆＃34;单一评论＆＃34;具有浮动权限的属性，它悬停在页脚上（使其达到自动缩放高度）。

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

但是你需要将你的页面内容放到一个包装器中以保持你的元素到位或者一切都会继续拉出和重叠

Answer 4

按如下方式更改容器：

#container {   display: table-cell; }

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

为什么我的页脚不是停留在页面底部？

4 个答案: