Question

我有一个HTML页面，主要内容背后有三个元素（不同的z索引）。问题是，当我的页面高度小于其中两个元素的结束位置时（当我使浏览器高度变小时），它们会向下推动并越过页面底部的底部，从而扩展页面高度以便用户可以滚过页脚，看到元素粘在一起。导致问题的因素是backvisual2和backvisual3。

我尝试过溢出设置，但我要找的只是体内特定元素的溢出要被忽略，而不是全部。隐藏这三个元素的溢出以防止页面高度扩展到页脚之外需要什么CSS？

编辑：我在正文中添加了最小高度，这在我上面链接的示例页面中创建了一个临时修复。

CSS：

#backvisual2
{
    height: 412px;
    width: 100%;
    background-image: url("images/mapcover.jpg");
    background-repeat:no-repeat;
    background-size:cover;

    position:absolute;
    left:0px;
    top:169px;
    z-index:-2;
}
#backvisual3
{
    height: 32px;
    width: 100%;
    background-image: url("images/backdropdivider.png");
    background-repeat: repeat-x;

    position:absolute;
    left:0px;
    top:550px;
    z-index:-1;
}
.wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -220px;
}
html
{
    height: 100%;
}

body
{
    background-color: #EEE;
    height: 100%;
}
#footerstart
{
    background: transparent URL('images/footerdrop.png') repeat-x;
    height: 16px;
    padding: 0px;
    width: 100%;
    margin-top: 32px;
    margin-bottom: 0px;
}
#footer
{
    margin-top: 64px;
    text-align: center;
    vertical-align: top;
    background: #838383;
    width: 100%;
    min-width: 850px;
    margin-top: 0px;
    padding-top: 16px;
    padding-bottom: 24px;
    height: 132px;
}
#footersect
{
    vertical-align: top;
    text-align: left;
    display: inline-block;
    width: 256px;
    border: 1px;
    padding-left: 16px;
}

HTML

<html>
<head>...</head>
<body>
    <div id="backvisual1"></div>
    <div id="backvisual2"></div>
    <div id="backvisual3"></div>

    <div class="wrapper">
        <div id="container">
            <div id=header></div>
                <div id=menu>
                ...
                </div>
            </div>
            [PAGE CONTENTS HERE]
        </div>
    </div>
    <div id="footerstart"></div>
    <div id="footer">
    ...
    </div>
</body>
</html>

Answer 1

问题是您在页面上有两个有问题的backvisual div：

<div id="backvisual2"></div>的高度为412px，超出了视口足够短时的视口高度。
<div id="backvisual1"></div>从顶部开始具有550px的顶部位置，这会使其在视口发生时位于视口之外。

我可以推荐的是使用多个背景图像（今天大多数浏览器都支持）。或者，您应该在.wrapper或.container元素上设置背景图片，而不是在没有语义含义的空<div>中使用它。

p / s：此外，在未来的小提琴中复制您的问题。链接到外部页面会导致问题因链接腐烂而失去相关性和上下文。

阻止扩展页面中的CSS元素

1 个答案: