Menu
I cannot figure out how to remove the scrollbar from this website. It is clearly not necessary. I have the page loaded on a 21" monitor and still see 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 in there making it extend past 100%? I tried making the height 100% but that doesn't seem to work..
If I don't make the body height 100%, my right column won't extend all the way down.
670
You have a height of 100%, and a padding of 10px at the top and 10px at the bottom. Padding is added to height, not included in it. So the total height of #eventcontainer is 100%+10px+10px, i.e. 20px more height than its container.
You have three options:
padding off the #eventcontainer element. overflow: hidden to the body element. However this is not recommended because on a smaller screen, the user will not have any way to scroll to see all the content.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
