HTML CSS 页脚在定位时做了一些奇怪的事情答案

【问题标题】：HTML CSS Footer does something weird when positioningHTML CSS 页脚在定位时做了一些奇怪的事情
【发布时间】：2015-01-02 06:20:57
【问题描述】：

我正在尝试使页脚随内容移动。它有效，但它做了一些非常奇怪的事情。当我将页脚的位置设置为“相对”时，它会随内容移动，但会破坏背景图像，如下图所示。如果我将其设置回绝对值，它将恢复正常，但不会随内容移动。

似乎底部 div 不会浮在其他内容上。

HTML：

<div class="wrapper">
    <!-- Top main div -->
    <img src="css/images/logo2.png" class="over">
    <div unselectable="on" class="top unselectable">
        <ul>
        <li><a href="index.html"><img src="images/home2.png" class="menu" width="218" height="50" ></a></li>
        </ul> 
    </div>

    <!-- Middle main div -->
    <div class="middle">
        <div class="content">
            <p class="big">
            Hello there!
        </div>
    </div>

    <!-- Bottom main div -->
    <div class="bottom">

    </div>
</div>

CSS：

div.wrapper
{
    min-height:100%;
    min-width: 1280px; 
    position:relative; /*most likely the problem. There's a dispute between this and the footer attribute*/
}

div.top
{
    height:100px;
    background-color:grey;
    background-repeat: repeat-x;
    background: url('images/top.png');
}

div.middle
{
    background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle.png);
    height: 100%;
    width: 100%;
}

div.content
{
    background: url(images/content.png);
    width: 800px;
    padding: 10px;
    border: 1px solid #373737;
    margin: 0;
    word-wrap: break-word;
    margin-left: auto ;
    margin-right: auto ;
    box-shadow: 2px 2px 2px #000000;
}

div.bottom
{
    height:78px;
    width: 100%;
    background-color:white;
    background-repeat: repeat-x;
    background: url(images/bottom.png);
    position:relative; /* Conflicts with the wrapper. */
    bottom:0;
    left:0;
}

具有位置的图像：绝对

具有位置的图像：相对

【问题讨论】：

您说希望“页脚随内容移动”是什么意思？将元素设置为 position:relative 对您在此处显示的实现没有实际影响。将一个元素设置为 position:absolute 会使其脱离文档的正常流程，导致其他元素在计算其位置时忽略它。
css-tricks.com/snippets/css/sticky-footer 这就是我的意思。当我向页面添加内容（更多文本）时，它必须向下移动页脚（不碍事）。否则文字会重叠。
我在调试时所做的是，我将 'border:1px solid' 添加到我的 div 或任何其他元素中，这样我就可以准确地看到它们的开始和结束位置、它们可能重叠的位置等等。这要容易得多。
类似的东西？ codepen.io/anon/pen/kmGcz
是的，只有当我这样做时，我的页脚才会像上面的图片那样做奇怪的事情。不知何故，我的页脚后面出现了一条白色条纹。

标签： javascript html css web

【解决方案1】：

要不要在页脚上使用相同的position: absolute，在.content 上使用padding-bottom？

div.content {
    padding-bottom: 78px;//height of the footer
}

【讨论】：

请查看我的代码，看看是否能找到正确的实现。我想不通。
已更新答案，请检查您是否质疑此答案。
然后页脚将漂浮在内容上，并且不再随内容移动。如果我将页脚设置为绝对，那么它将浮动在固定位置的内容上。如果我将其设置为相对，它将不再漂浮在网页背景等其他元素上，而是将其向上推并放置在底部，创建一个白色背景。
所以你想修复页脚？当你滚动它必须保持在底部是吗？您能否在线上传图片并在jsfidle 中使用它们，让我看看您有什么具体问题？现在我不确定你需要什么 :) 谢谢。

【解决方案2】：

只需将 div 向上移动一点：top 和 z-index。只有 z-index 不在顶部。

div.bottom
{
    height:78px;
    width: 100%;
    background-color:white;
    background-repeat: repeat-x;
    background: url(images/bottom.png);
    position:relative;
    bottom:0;
    left:0;
    top:-15px;
    z-index:2;
}

【讨论】：

这让我在底部有一条白线，页脚没有覆盖。此外，那条白线使页脚的背景看起来很糟糕（洗掉了）。
调整高度78px以上
或者，将上面的 div 向下移动，无论哪种方式。
为此，我必须在 Photoshop 中重新创建更高的图像（原始图像只有 78 像素）。我相信我的问题有更好的解决方案。