80

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

4

6 回答 6

89

您正在寻找的是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>

于 2013-09-11T11:32:40.307 回答
36

你可以position:fixed;使用bottom.

例如：

#footer{
 position:fixed;
 bottom:0;
 left:0;
}
于 2013-09-11T11:32:34.330 回答
2

HTML

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

CSS

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   
   background:blue;//optional
}
于 2013-09-11T11:33:00.073 回答
1

设置它的位置：固定和底部：0，以便它始终位于浏览器窗口的底部

于 2013-09-11T11:31:32.780 回答
1

也许最简单的方法是使用position: absolute固定到底部，然后使用合适的边距/填充来确保其他文本不会溢出到它的顶部。

CSS：

<style>
  body {
    margin: 0 0 20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 20px;
    background: #f0f0f0;
    width: 100%;
  }
</style>

这是html的主要内容。

<div class="footer"> Here is the footer. </div>
于 2013-09-11T11:36:22.660 回答
-5

使用这种风格

min-height:250px;
height:auto;
于 2013-09-11T11:32:09.690 回答