JSFiddle Demo

Question

我无法在页面底部粘贴页脚。我已阅读了数十篇教程，但仍有问题。在内容覆盖所有窗口的页面中，页脚粘在底部没有问题。但是在没有大量内容的页面中，页脚位于页面中间。

<html><body>

 text here text here

 <footer id="footer">
  Im in the footer and bottom of the page!
 </footer>

</body></html>


body {
  background: url('/static/img/bg.png');
  min-width: 1300px;
  height: 100%;
}

footer {
 clear: both;
 padding-top:20px;
 padding-bottom:20px;
 background-color:#222;
 margin-top: 15px;
 color: white;
 text-align: center;
 }

我尝试在页脚中添加position:absolute或position:fixed和bottom:0px，但结果最差。页脚后面有一个空格。

Answer 1

你可以试试这个

html, body {height: 100%;}

#wrap {min-height: 100%;}

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

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

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

这是一个HTML

以下是HTML代码的基本结构。您会注意到页脚如何位于包裹之外。

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

您可以将内容元素放在主内容中。例如，如果您使用的是2列浮动布局，则可以使用此选项;

<div id="wrap">

    <div id="main">

        <div id="content">

        </div>

        <div id="side">

        </div>

    </div>

</div>

<div id="footer">

</div>

标题可以放在包装内，但可以放在主页上方;

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

Answer 2

您可以像这样使用position:fixed和bottom:0px;：

 footer {
 clear: both;
 padding-top:20px;
 padding-bottom:20px;
 background-color:#222;
 margin-top: 15px;
 color: white;
 text-align: center;
    position:fixed;
    bottom:0px;
    width:100%;
 }

无论身体有多少内容，页脚都会保留在底部。要删除它周围的空白区域并使其宽度为100％，您需要删除边距和填充：

body,html {
  background: url('/static/img/bg.png');
  width:100%;
  height: 100%;
    padding:0;
    margin:0;
}

页脚位于短页面中间

2 个答案:

JSFiddle Demo