0

我已经用 html 编写了这个代码并且工作完美， http://akaleez.co.uk/Templates/3/

然后我尝试将其设置为 wordpress 主题，现在我的页脚不会在屏幕上填满

http://lisas-nails.co.uk/?theme=twentytwelve1

只有底部的黑色部分可以。

4

1 回答 1

1

我相信您面临的问题的根源实际上是某些元素将页面滚动水平扩展为比可见内容更宽的问题。首先，识别违规元素：

其中之一是#sidebar。我实际上不确定这在您的 WordPress 变体中来自哪里，因为它不存在于您编码的原始 HTML 中。无论如何，问题是这个元素包含一个<ul>600px 宽的元素，导致额外的水平滚动。如果您不需要此元素，只需删除它，因为它看起来不像您将它用于任何事情。或者，只需删除元素width:600px上的<ul>，因为这是问题的根源。

另一个有问题的元素是.left元素，它将其相加width:100%并padding-left:190px从视口延伸 190 像素。我不能确定为什么这种行为不会出现在您的原始 HTML/CSS 中 - 可能存在不同于您最初在此处编写的 CSS，因为这两个页面并不相同。

要解决此问题，您可以改为依赖 a 的默认行为<div>，它扩展到覆盖其父级的整个宽度，而不是使用width:100%：

.left {
    background-color: #000000;
    color: #FFFFFF;
    height: 30px;
    padding-left: 190px;
    padding-top: 10px;
    text-align: left;
    width: auto;
}

（上面，我基本上只是删除了浮动并将宽度更改为自动。）

大多数页脚没有扩展到右侧的额外空间的原因是因为它占用了 100% 的宽度 - 即其父级的 100%，在这种情况下，它仅与视口一样宽。但这不是一个新问题，如果您在原始页面中缩小屏幕，您会看到页脚同样不会延伸到视口之外的空间。

无论如何，我希望这就是你要找的！如果不是，或者您发现部分不清楚，请告诉我，我很乐意为您提供进一步帮助。祝你好运！

于 2013-08-01T22:09:06.807 回答