Home/ Questions/Q 9229647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:37:27+00:00

I cannot figure out how to remove the scrollbar from this website. It is

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    1. Take the vertical padding off the #eventcontainer element.
    2. Add 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.
    3. As mentioned in the comment below with link, you can change the box sizing model you are using.
    • 0