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

I'm trying to set a certain height to appear vertical scrollbar on the browser. My container is only 500 pounds high I set the body in 500 px high but I also have a footprint which is about 30px high under the container. So my whole page is about 530px. Although I do not want the page to start scrolling when it detects the bottom of the footer, but below the container. Is there a way to ignore my footstep, so that the page does not start scrolling to 500 pixels?

My Markup:

  & lt; Body & gt; & Lt; Div id = "veritcal" & gt; & Lt; / Div & gt; & Lt; Div id = "container" & gt; & Lt; / Div & gt; & Lt; Div id = "row1" & gt; & Lt; Div id = "box1" & gt; Content & lt; / Div & gt; & Lt; Div id = "box1" & gt; Content & lt; / Div & gt; & Lt; Div id = "box1" & gt; Content & lt; / Div & gt; & Lt; Div id = "box1" & gt; Content & lt; / Div & gt; & Lt; Div id = "box1" & gt; Content & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; Some footer content & lt; / Div & gt; & Lt; / Body & gt;   
 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; Minimum width: 800 pixels; Minimum height: 500px; } #vertical {status: relative; Height: 50%; Margin-top: -250px; Margin-left: 0 pixels; Margin-right: 0 pixels; Width: 100%; } # Container {status: relative; Width: 800 pixels; Height: 500px; Padding: 0 pixels; 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: 550 pixels; Height: 30px; Background color: # 000000; Color: RGBA (0, 166, 172, 0.3); Line-height: 2.0 AM; Font-size: 0.7em; font-weight: bold; Text align: center; Boundary-radius: 5px; Opacity: 0; } #footer: Hover {Opacity: 1; }   
 Then, my page starts scrolling at 530px at the bottom of the footer. I have a container horizontally centered and my #ctarticle devital container center stops when I change the size of the browser, the top of the container closes completely at the top of the browser, but then the browser vertical scrollbar 500 Instead of PX, it is displayed at 530 px, which I set for the body's minimum height. Definitely why it still looks at 530px.  
  
 
 
 If I think what you want, then I think that you are in #footer in CSS Need to use  
  display: none;   
 instead of  
  opacity: 0;   
 I hope you will help ...  
 
 If you want to use  #footer: hover  So try this code in  #footer , try it  
  #footer {margin-left: auto; Margin-top: 5px; Margin-right: auto; Padding: 10px 10px 0 10px; Width: 550 pixels; Height: 30px; Background color: # 000000; Color: RGBA (0, 166, 172, 0.3); Line-height: 2.0 AM; Font-size: 0.7em; font-weight: bold; Text align: center; Boundary-radius: 5px; Opacity: 0; / * Add this code * / Status: fixed; Bottom: 0; Correct: 50%; Margin-right: -285px; }   
 You can also use  
  Status: Absolute; Instead of   
  
  status: fixed;   
 Perhaps this will solve your problem ...