使HTML页面页脚以最小高度停留在页面底部的CSS

我有以下页面（deadlink： http://www.workingstorage.com/Sample.htm ://www.workingstorage.com/Sample.htm），有一个页脚，我不能坐在页面的底部。

CSS是继承和困扰我的; 我似乎无法正确更改它以将内容放在最小高度或使页脚处于最低点。

---

让身体100%的页面， min-height也是100% 。

页脚然后被赋予负边限：

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

---

这是一个很好的跨浏览器的简单方法，它是这样的：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

---

从IE7开始，你可以简单地使用

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

请参阅caniuse寻求支持。

链接地址: http://www.djcxy.com/p/23727.html

上一篇: CSS to make HTML page footer stay at bottom of the page with a minimum height

下一篇: How do you get the footer to stay at the bottom of a Web page?