1

我正在尝试为垂直滚动条开始在浏览器上可见时设置一个固定高度。我的容器只有 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。

4

1 回答 1

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;

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

于 2013-06-21T16:42:06.213 回答