CODEWITHSUNDEEP
htmlcss
Charles Williams
Charles Williams

Reputation: 573

Fixed Height for Vertical Scrollbar to Appear? No JS, only CSS

I am trying to set a fixed height for when the vertical scrollbar begins to be visible on the browser. My container is only 500px high. I set the body to 500px high. But I also have a footer that is about 30px high below the container. So my entire page is about 530px. However I don't want the page to start scrolling when it detects the bottom of the footer, but rather at the bottom of the container. Is there any way to ignore my footer so the page doesn't begin to scroll until 500px??

My markup:

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

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

So again, my page begins scrolling at 530px at the bottom of the footer. I have the container horizontally centered and my #vertical div makes the container center vertically. When I resize the browser, the top of the container stops at the top of the browser perfectly, but then the browser vertical scrollbar appears at 530px instead of 500px, which I set for the min-height of the body. Not sure why it still appears at 530px.

Upvotes: 1

Views: 1699

Answers (1)

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

if I propably understood what you want, i think that you need to use in #footer in css

display: none;

instead of

opacity: 0;

I hope that will help you ...

if you want to use #footer:hover , may this code help you in #footer , try this

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

you can also use 

position: absolute;

instead of 

position: fixed;

maybe this will solve your problem ...

Upvotes: 1

Related Questions