Question

我在那里的页面上工作：

我是新手，并在那里按照教程：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

页脚位于底部，但页面的高度似乎比应有的大，并且浏览器上有一个滚动条，任何人都可以告诉我原因？！

Answer 1

<footer>有padding-top，应在框模型中计算。因此，包装器的实际页边距应该计算页脚的高度和填充。查看html框模型了解更多详情！它肯定会很有趣:)而且，使用Chrome开发者工具或Firefox firebug来加速您的学习过程

Answer 2

您的链接无法打开。但也许你可以做类似

的事情

body {
  height: 100%;
  position: relative;
}
.footer {
  position:absolute;
  left: 0;
  bottom: 0;
}

Answer 3

额外的高度似乎来自＃footer-container上的padding-top，＃footer上的边框，以及＃masthead-container上的边距（更改为#intent-container上的padding）似乎修复它）。

摆脱所有这些，消除了滚动条。

Answer 4

我对你写的风格做了一些改变。只需替换为#footer编写的代码。

 #footer {
    background-color: white;
    border: 1px solid #D2CECE;
    border-radius: 5px 5px 0 0;
    box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, 0.2);
    clear: both;
    height: 200px;
    margin-bottom: 0;
    margin-left: 193px;
    position: fixed;
    width: 960px;
 }

我已将左边距设置为193px，您需要调整。你应该添加一个主容器div来包含所有标记。喜欢

   <body>
       <div id="main">
           <!-- all the markup (HTML code) -->
       </div>
  </body>

因此，通过将样式应用于“#main”，您可以使所有包含中心对齐，而无需给出左边距或右边距以使其居中。

页脚实际上不会粘到底部

4 个答案: