如何保持页脚在屏幕的底部 [英] How to keep footer at bottom of screen

问题描述

设置网页的最佳做法是什么，如果在该网页上显示的内容/文本非常少，则页脚显示在浏览器窗口的底部，而不是网页的中间位置？

What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?

推荐答案

您正在寻找的是 CSS Sticky Footer 。

HTML：

<div id="wrap">
  <div id="main"></div>
</div>

<div id="footer"></div>

CSS：

* {
  margin: 0;
  padding: 0;
} 

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 180px; /* must be same height as the footer */
}

#footer {
  position: relative;
  margin-top: -180px; /* negative value of footer height */
  height: 180px;
  clear: both;
} 

/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;/* thank you Erik J - negate effect of float*/
}

这篇关于如何保持页脚在屏幕的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！