Question

我有一个固定的HTML主体（960px）。我想让页脚（身体的后代）从一个屏幕边框移动到另一个屏幕边框（带有背景颜色或图像） - 这超出了身体的960px限制。

这可能吗？

Answer 1

简单的答案是不在主体上放置明确的宽度，而是在页面中需要它的那些区域使用子容器元素：

<body>
    <div class="narrower-container"> ... </div>
    <div class="full-width-container"> ... </div>
</body>

<style>
.narrower-container {
    width: 960px;
    margin: 0 auto; /* center alignment */
}
</style>

另一种选择是对页脚使用绝对定位，并在主体上放置适当的填充以考虑其高度。

Answer 2

在身体上放置固定宽度并不是一件好事。如果您无法更改，那么我认为您可以将position:relative放在<html>上，然后输入

position:absolute
left:0
right:0
bottom:0

在页脚上

。但这种方法取决于<html>和<footer>

之间没有相对定位的元素

通常，如果您希望子元素的宽度超过其父元素，则可以使用以下几种方法： 1）负边距：这将要求您准确知道儿童宽度将超过多少像素 2）绝对/相对位置：这更适合您的情况，因为您希望孩子的宽度相对于屏幕（在您的情况下，身体的宽度无关紧要）。因此，您只需将屏幕宽度（在您的情况下为<html>）设置为相对位置且所需的子项绝对定位。

页脚延伸到身体边缘之外

2 个答案: