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

Question

出于某种奇怪的原因，我的页脚显示在页面内容的后面，高度不再正确，我似乎无法修复它。我尝试了其他答案，其中 none 行得通。这个可以看看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 的高度塌陷。您应该阅读有关 floating 和 clearfix 的内容，但这里有两个解决方案 from this thread:

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

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

快速而肮脏：

#container { overflow: auto; }

Answer 2

按如下方式更改您的容器：

#container {   display: table-cell; }

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

Answer 3

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

Answer 4

这并不是说您的页脚没有停留在页面底部。你的 class "single-review" 有属性向右浮动，它悬停在页脚上（导致它自动缩放高度）。

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

但是您需要将页面内容放入包装器中以保持元素在原位，否则所有内容将继续拉出并重叠

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

Why is my Footer is not Staying at Bottom of Page?

html

css

wordpress

footer