0

我正在那里的一个页面上工作：

我是新手，在那里学习了一个教程：http ://ryanfait.com/resources/footer-stick-to-bottom-of-page/

页脚在底部，但页面的高度似乎比它应该的大，而且我的浏览器上有一个滚动条，谁能告诉我为什么？！

4

4 回答 4

0

有<footer>一个padding-top应该计入盒子模型中。所以包装器的实际边距底部应该计算页脚的高度和填充。查看 html 框模型以获取更多详细信息！肯定会很有趣 :) 而且，使用 Chrome 开发者工具或 Firefox firebug 来加速你的学习过程

于 2012-12-11T11:08:51.317 回答
0

你的链接打不开。但也许你可以做类似的事情

body {
  height: 100%;
  position: relative;
}
.footer {
  position:absolute;
  left: 0;
  bottom: 0;
}
于 2012-12-11T11:09:53.227 回答
0

额外的高度似乎来自 #footer-container 上的 padding-top、#footer 上的边框，以及最重要的是 #masthead-container 上的边距（将其更改为 #content-container 上的 padding 似乎可以解决它）。

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

于 2012-12-11T11:10:16.837 回答
0

我对你写的风格做了一些改变。只需替换为#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”，您可以使所有包含中心对齐，而无需提供左右边距以使其居中。

于 2012-12-11T11:22:35.440 回答