Footer的网站正在创建一个水平滚动条

Question

这是我目前正在处理的网站：

http://whybaguio.com/php/about/about.php

页脚正在创建一个额外的水平滚动条..我不太确定有什么问题，但有人可以帮助我吗？它还在左边创建了一个额外的空格....

谢谢！

Answer 1

这是因为您在width元素上同时指定了100％padding 和 block。如果您对older IE versions不太感兴趣，可以通过简单地添加：

来解决此问题

#footer {
    width:100%;
    padding:30px;
    ...
    -webkit-box-sizing:border-box; /* Older webkit */
    -moz-box-sizing:border-box; /* Firefox */
    box-sizing:border-box;
}

您可能还想让页面的body margin为0，让页脚完全覆盖屏幕的左侧，右侧和底部。

Answer 2

页脚左侧的空白是body标签上的默认边距/填充。此外，您的页脚宽度为100％+填充，这意味着超过100％。如果您删除100％语句，浏览器将使其100％bij默认并补偿填充。

对CSS应用以下两项更改，一切都会很好：

body {
  padding: 0; // add this line
  margin: 0; // add this line
}

#footer {
 width: 100%; // remove this line
}

Answer 3

这是因为你在#footer上使用100％，并且左右应用30px填充，这将增加100％的屏幕宽度。

从#footer中删除以下CSS：

padding: 30px;

Answer 4

在页脚padding-left: 0;上设置padding-right:0;和div。我也想知道......为什么丑陋的自定义滚动条？

Answer 5

尝试：

#footer{

...
padding: 30px 0;
...

}