Geek Answers Handbook

Remove a vertical scrollbar that is clearly not needed

I cannot figure out how to remove the scroll bar from this website. This is clearly not necessary. I have a page loaded on a 21 inch monitor and still seeing it.

http://akrush95.freeoda.com/clash/

Here is the html from my index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body,html{ height:100%; margin: 0px; padding: 0px; } #title { padding-top: 20px; font-size: 36px; } #title #RHS { font-size: 40px; font-weight: bold; } .scoreboard { text-align: center; } .scores { font-size: 36px; } .score-title { font-size: 18px; text-decoration: underline; } #content { text-align: center; min-width: 250px; } #eventcontainer { padding: 10px; float: right; background-color: #999; width: 200px; min-height: 100%; } #eventboard #eventcontainer h1 { text-align: center; text-decoration: underline; } .sb { display: inline-block; width: 135px; border: thin double #000; margin: 10px; } .sb #title { font-size: 22px; text-decoration: underline; font-weight: bold; padding-top: 5px; } .sb #score { font-size: 40px; font-family: "Lucida Console", Monaco, monospace; padding: 5px; } #add { cursor: pointer; font-size: 18px; } #sub { cursor: pointer; font-size: 18px; } </style> </head> <body> <div id="eventcontainer"> <h1>Event Board</h1> <p>25 January 2013<br /> -Event 1<br /> -Event 2 </p> <p>26 January 2013<br /> -Event 3<br /> -Event 9</p> <p>31 January 2013<br /> -Event </p> </div> <div id="content"> <div id="title"> <div id="RHS">Roslyn High School</div> <div id="CotC">Clash of the Classes</div> <div id="year">2013</div> </div> <br/> <div id="scores">Loading...</div> </div> </body> </html>

Is there anything that makes it spread for 100%? I tried to make the height 100%, but this does not seem to work.

If I do not create a body height of 100%, my right column will not extend to the end.

+4
source share
1 answer

You have a height of 100% and the top is 10 pixels at the top and 10 pixels at the bottom. The additive is added to the height, not included in it. Thus, the total height of the #event container is 100% + 10px + 10px, that is, 20px more height than its container.

You have three options:

  • Take the vertical padding element #eventcontainer .
  • Add overflow: hidden to the body element. However, this is not recommended because on a smaller screen the user will not be able to scroll to see all the content.
  • As mentioned in the comment below with a link, you can change the used box size model.
+7
source

More articles:


All Articles