Question

我无法弄清楚如何从此网站中删除滚动条。显然没有必要。我将页面加载到21英寸的显示器上，仍然可以看到它..

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

这是我的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">Clash of the Classes</div>
        <div id="year">2013</div>
    </div>
    <br/>
    <div id="scores">Loading...</div>
</div>
</body>
</html>

那里有什么东西让它超过100％吗？我尝试将高度设为100％，但这似乎不起作用..

如果我没有使身高达到100％，我的右栏将不会一直向下延伸。

Answer 1

您的高度为100％，顶部的填充为10px，底部的填充为10px。填充添加到高度，不包括在内。所以#eventcontainer的总高度是100％+ 10px + 10px，即比容器高20px。

您有三种选择：

从padding元素中取垂直#eventcontainer。
将overflow: hidden添加到body元素。但是不推荐这样做，因为在较小的屏幕上，用户无法滚动查看所有内容。
如下面评论中提到的链接，您可以更改正在使用的框大小调整模型。

删除显然不需要的垂直滚动条

1 个答案: