Question

我已尝试按照here找到的教程让我的页脚粘在浏览器窗口的底部。我已经多次检查了教程，看起来我的结构正确。然而，我的页脚仍然在窗口上方徘徊大约30px。被困在这上面几天，我都是想法，所以任何帮助都会很棒：）

<div class = "wrapper">
  <div id='cssmenu'>
  </div>


  <div id="header">
    <h1>My header</h1>
  </div>
  <div class="content">Some content
  </div>
  <div class="push">
  </div>
</div><!-- end wrapper -->


<div class="footer">Footer with images
</div>



* {
margin: 0;
}

html, body {
height: 100%;
}

body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
background-color: #FCFDFF;
font-size: 18px;
}

.content
{
  padding: 0% 0% 0% 20%;
  width: 65%;
  line-height:1.7em;
  background-color: #FCFDFF;

}


.footer, .push {
height: 4em;
clear: both;
}

.footer {
  background-color: #000;
}

.footerImages {

padding: 5px 5px 5px 1px;
    float: right;
}

Answer 1

为什么不做呢

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

这会给你一个贴在窗户底部的页脚，根据你的问题，这就是你想要的。

Answer 2

您错过了.wrapper css内容：

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

只有在包装器有此信息时它才会起作用。工作演示：http://jsfiddle.net/8g5h5fe5/

页脚不会粘到底部

2 个答案: