【问题标题】：Footer is in the middle of short pages [duplicate]页脚位于短页面的中间[重复]
【发布时间】：2014-07-24 16:11:28
【问题描述】：

我无法在页面底部设置页脚。我已经阅读了数十篇教程，但仍然有问题。在内容覆盖整个窗口的页面中，页脚被粘在底部没有问题。但在内容不多的页面中，页脚位于页面中间。

<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，但结果最差。页脚后有一个空格。

【问题讨论】：

我真的很喜欢 Stuart Nicholls 的这个：cssplay.co.uk/layouts/basics2.html

标签： html css

【解决方案1】：

您可以像这样使用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;
}

JSFiddle Demo

【讨论】：

【解决方案2】：

你可以试试这个

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>

您可以将内容元素放在 main 中。例如，如果您使用的是 2 列浮动布局，您可能会遇到这种情况；

<div id="wrap">

    <div id="main">

        <div id="content">

        </div>

        <div id="side">

        </div>

    </div>

</div>

<div id="footer">

</div>

可以像这样将标题放置在包装内但在 main 上方；

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

【讨论】：

您能否添加一段简短的代码，说明您如何使用 main 和 wrap？
看看我上面编辑的答案。问候