如何将页脚保持在屏幕底部

Question

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

Answer 1

您正在寻找的是CSS Sticky Footer.

* {
  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;
  background-color: red;
}


/* 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*/
}

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

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

Answer 2

你可以position:fixed;用来bottom.

例如:

#footer{
 position:fixed;
 bottom:0;
 left:0;
}