删除垂直滚动条，这显然是不必要的

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

我不知道如何从这个网站上删除滚动条。这显然是不必要的。我已经把页面加载到一个21英寸的显示器上，还能看到它。

http://akrush95.freeoda.com/*/

Here is the html from my index.php

这是我的index.php中的html

<!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">* 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..

有什么东西使它超过100%吗?我试着把身高提高到100%，但似乎行不通。

If I don't make the body height 100%, my right column won't extend all the way down.

如果我不把体高设为100%，我的右栏就不会一直延伸下去。

1 个解决方案

#1

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.

高度为100%，顶部为10px，底部为10px。填充被添加到高度，不包括在其中。所以#eventcontainer的总高度是100%+10px+10px，比它的容器高20px。

You have three options:

你有三个选择:

Take the vertical padding off the #eventcontainer element.
从#eventcontainer元素中提取垂直填充。
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.
添加溢出:隐藏到主体元素。但是，不建议这样做，因为在较小的屏幕上，用户无法滚动查看所有内容。
As mentioned in the comment below with link, you can change the box sizing model you are using.
正如下面链接的注释中所提到的，您可以更改正在使用的框大小模型。

#1

高度为100%，顶部为10px，底部为10px。填充被添加到高度，不包括在其中。所以#eventcontainer的总高度是100%+10px+10px，比它的容器高20px。

You have three options:

你有三个选择:

Take the vertical padding off the #eventcontainer element.
从#eventcontainer元素中提取垂直填充。
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.
添加溢出:隐藏到主体元素。但是，不建议这样做，因为在较小的屏幕上，用户无法滚动查看所有内容。
As mentioned in the comment below with link, you can change the box sizing model you are using.
正如下面链接的注释中所提到的，您可以更改正在使用的框大小模型。

秒客网

删除垂直滚动条，这显然是不必要的

1 个解决方案

#1

#1

相关文章