javascript - HTML CSS Footer 在定位时做了一些奇怪的事情

Question

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

底部的 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:absolute

图像position:relative

Answer 1

在页脚上使用相同的 position: absolute 并在 .content 上使用相同的 padding-bottom 怎么样？

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