将页脚保持在响应式网站的底部[重复]答案

【问题标题】：Keeping footer at bottom of responsive website [duplicate]将页脚保持在响应式网站的底部[重复]
【发布时间】：2015-12-02 06:51:13
【问题描述】：

我想让我的页脚始终显示在页面底部，并且在页面内容很少时不向上移动。我试过了

body, html {
height: 100%}

html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 226px!important;/*Footer height*/
}

#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

但由于我的网站是响应式的，因此页脚高度会有所不同，并且此代码会隐藏某些页面上的内容。有什么办法可以做到吗？

【问题讨论】：

你能在小提琴中重现你的问题吗？

标签： html css

【解决方案1】：

使用位置：固定。在#containerfooter

#containerfooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
 }

对于“粘性页脚”，请参阅tutorial

【讨论】：

这不是他想要的。他想要非常典型的“粘性页脚”。

【解决方案2】：

如果页脚高度根据屏幕宽度而变化，将其固定到视口或屏幕的底部将不是解决方案。

我的印象是，随着屏幕尺寸的减小，页脚中的内容会在彼此下方换行或折叠，因此最好在包裹页面内容的任何元素上设置一个最小高度。

A Code Pen Example

$("#addBodyContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".page-wrap .content");
});

$("#addFooterContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".site-footer .content");
});

* {
  margin: 0;
}
html,
body {
  height: 92%;
  font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.page-wrap {
  min-height: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer {
  background: black;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100px;
  text-align: center;
  padding: 10px;
  color: white;
  box-sizing: border-box;
}
button.dark:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
button.dark {
  background-color: black;
  border: 3px solid black;
  padding: 10px 30px;
  color: white;
  cursor: pointer;
  transition: .7s;
}
button.light:hover {
  background-color: #CCCCCC;
}
button.light {
  background-color: white;
  border: 3px solid white;
  padding: 10px 30px;
  color: black;
  cursor: pointer;
  transition: .7s;
}
.content p {
  margin-bottom: 10px;
}
.content {
  border-top: 1px solid black;
  padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">

  <h1>Header</h1>
  <br>

  <button id="addBodyContent" class="dark">Add Content</button>
  <br>
  <br>
  <div class="content"></div>
</div>

<footer class="site-footer">
  <h2>Footer</h2>
  <br>
  <button id="addFooterContent" class="light">Add Content</button>
  <br>
  <br>
  <div class="content"></div>
</footer>

【讨论】：