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

【问题标题】：Fixed Height for Vertical Scrollbar to Appear? No JS, only CSS垂直滚动条出现的固定高度？没有 JS，只有 CSS
【发布时间】：2014-05-17 12:17:16
【问题描述】：

我正在尝试为垂直滚动条开始在浏览器上可见时设置一个固定高度。我的容器只有 500px 高。我将主体设置为 500px 高。但我也有一个在容器下方约 30px 高的页脚。所以我的整个页面大约是 530px。但是我不希望页面在检测到页脚底部时开始滚动，而是在容器的底部。有什么办法可以忽略我的页脚，这样页面直到 500 像素才开始滚动？？

我的标记：

<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;
}

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

【问题讨论】：

正如下面 Mujtaba 的回答所提到的，我不能使用 display: none;因为那样我的页脚将无法使用翻转效果。有没有其他解决方案？

标签： html css

【解决方案1】：

如果我可以理解你想要什么，我认为你需要在 #footer in 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;

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

【讨论】：

这确实解决了滚动问题。但是当你将鼠标悬停在它上面时，我设置了我的页脚。这使得悬停效果不再起作用，即使我放置了#footer:hover{display:block}。它不是链接，所以我不想将它包装在 href 标记中。我如何保持我的翻转？我在上面编辑了我的问题以在 css 中显示我的翻转。
所以为了让我的页脚显示为翻转显示：无；我必须在我的页脚 div 中放置一个
，这会破坏使用 display:none; 的全部意义。因为那时我必须把它放在#footer:hover div{}上，我已经通过并尝试使用 css 动画或其他东西来使翻转工作，但随后滚动条问题又回来了。所以上面的答案对我不起作用。对不起。
使用了你的第二部分，它确实有效！位置：绝对；没有，但位置：固定；做。我没有使用显示器：无；在顶部。非常感谢您的帮助！