Question

我正在尝试为浏览器上的垂直滚动条开始显示时设置固定高度。我的容器只有500px高。我将机身设置为500px高。但我也有一个在容器下方约30px高的页脚。所以我的整个页面大约是530px。但是我不希望页面在检测到页脚底部时开始滚动，而是在容器的底部。有没有办法忽略我的页脚，所以页面不会开始滚动，直到500px ??

我的标记：

<body>
<div id="veritcal"></div>
<div id="container"></div>
    <div id="row1">
        <div id="box1">content</div>
        <div id="box1">content</div>
        <div id="box1">content</div>
        <div id="box1">content</div>
        <div id="box1">content</div>
     </div>
</div>
<div id="footer">Some Footer Content</div>

</body>

我的css：

html,body{
height: 100%;
margin: 0;
padding: 0;
}

body{
font-family: "Lucida Console", Monaco, monospace;
font-size: 1em;
font-style: normal;
color: #FFFFFF;
text-align: center;
min-width: 800px;
min-height: 500px;
}

#vertical{
position: relative;
height: 50%;
margin-top: -250px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
}

#container{
position: relative;
width: 800px;
height: 500px;
padding: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 0;
}

#footer{
margin-left:auto;
margin-top: 5px;
margin-right: auto;
padding: 10px 10px 0 10px;
width: 550px;
height: 30px;
background-color: #000000;
color: rgba(0, 166, 172, 0.3);
line-height: 2.0em;
font-size: 0.7em;
font-weight: bold;
text-align: center;
border-radius: 5px;
opacity: 0;
}

#footer:hover{
opacity: 1;
}

再次，我的页面开始在页脚底部的530px滚动。我将容器水平居中，我的#vertical div使容器垂直居中。当我调整浏览器大小时，容器的顶部完全停在浏览器的顶部，但是浏览器垂直滚动条出现在530px而不是500px，我设置为身体的最小高度。不知道为什么它仍然出现在530px。

Answer 1

如果我能够理解你想要什么，我认为你需要在#foot中使用css

display: none;

而不是

opacity: 0;

我希望这会对你有帮助......

如果你想使用 #footer：hover ，这段代码可以帮助你在 #footer 中，试试这个

#footer {
    margin-left: auto;
    margin-top: 5px;
    margin-right: auto;
    padding: 10px 10px 0 10px;
    width: 550px;
    height: 30px;
    background-color: #000000;
    color: rgba(0, 166, 172, 0.3);
    line-height: 2.0em;
    font-size: 0.7em;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    opacity: 0;
    /*add this code*/
    position: fixed;
    bottom: 0;
    right: 50%;
    margin-right: -285px;
}

您也可以使用

position: absolute;

而不是

position: fixed;

也许这会解决你的问题...

垂直滚动条出现的固定高度？没有JS，只有CSS

1 个答案: