Question

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

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%;
}

但由于我的网站是响应式的，因此页脚高度会有所不同，此代码会隐藏某些页面上的内容。有没有办法让这项工作？

Answer 1

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

我得到的印象是，当屏幕尺寸减小时，页脚中的内容会在彼此下方包裹或折叠，因此请在页面内容包装的任何元素上设置最小高度。

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>

Answer 2

使用位置：固定。在#contafootfooter

中

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

for＆＃34;粘性页脚＆＃34;请参阅此tutorial

保持页脚在响应式网站的底部

2 个答案: