Question

此html / css（请参阅http://jsfiddle.net/0x4u00we/embedded/result/的结果）表现如预期，除非页面变得足够窄以至于“notice”和“footer”div重叠;在这种情况下，所需的行为是页脚相应地向下滑动。

我意识到#notice的绝对定位将其从流程中取出，并且可能只有javascript可以人为地降低#footer。

然而，我的目标是将其保持在100％html / css中。我尝试过许多其他html结构和css设置（浮点数等）。欢迎所有建议。 THX。

<!DOCTYPE html>
<head>
    <style type="text/css">

         html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 10px;
        }

        #paintsplatter {
            position: relative;
            width: 100%;
            max-width: 1000px;
            padding-bottom: 25px;
            /*overflow: hidden;*/
        }

        #psimg {
            position: relative;
            width: 100%;
            z-index: -2;
        }

        #notice {
            position: absolute;
            top: 55%;
            left: 7%;
            width: 43%;
            margin-left: 30px;
            font-size: 12pt;
            font-weight: 600;
            z-index: 0;
        }

        #footer {
            position: relative;
            margin-top: 20px;
            text-align: center;
            font-size: 12pt;
            background-color: rgba(255, 255, 255, 0.65);
            z-index: 1;
        }
    </style>
</head>
<html>
    <body>
        <div id="paintsplatter">
            <img id="psimg" src="http://i62.tinypic.com/dp8cw1.jpg">
            <div id="notice">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
        </div>
        <div id="footer">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </body>
</html>

Answer 1

首先，将你的页脚从#paintsplatter div中取出，你不需要它，它只会以你现在的方式引起问题。

一旦你这样做，#notice div中的一些变化就会成功：

#notice {
    position: absolute;
    bottom: 25%;
    left: 7%;
    width: 43%;
    margin-left: 30px;
    font-size: 12pt;
    font-weight: 600;
    z-index: 0;
}

See fiddle here

<强>解释

由于您希望阻止文本找到文档的BOTTOM，因此使用bottom属性而不是top更容易。然后文本将表现得更好，因为无论页脚推送内容有多难，该文本将始终是上面包含元素大小的25％。当然，在这种类型的布局中，您需要在较低的屏幕上调整，没有办法避免它，因为它是您的方法所固有的，但您可以使用媒体查询并添加更多宽度，降低bottom属性值，使用像素，无论

Answer 2

这是一个很大的问题如果您使用 #notice 作为 position：absolute ，则无法修复。

试试这个：

<!DOCTYPE html>
<head>
    <style type="text/css">

         html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 10px;
        }

        #paintsplatter {
            background: url(http://i62.tinypic.com/dp8cw1.jpg) center no-repeat;
            background-repeat: no-repeat;
            background-clip: border-box;
            background-size: contain;
            position: relative;
            width: 100%;
            max-width: 1000px;
            padding-bottom: 25px;
            /*overflow: hidden;*/
        }

        #notice {
            position: relative;
            padding-top: 40%;
            padding-left: 7%;
            width: 43%;
            margin-left: 30px;
            font-size: 12pt;
            font-weight: 600;
            z-index: 0;
        }

        #footer {
            position: relative;
            margin-top: 20px;
            text-align: center;
            font-size: 12pt;
            background-color: rgba(255, 255, 255, 0.65);
            z-index: 1;
        }
    </style>
</head>
<html>
    <body>
        <div id="paintsplatter">
            <div id="notice">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
        </div>
        <div id="footer">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </body>
</html>

在图像上滑动文本：如何将页脚保持在所有元素下方

2 个答案: