4

我不知道如何从这个网站上删除滚动条。显然没有必要。我在 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%，我的右柱就不会一直向下延伸。

4

1 回答 1

9

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

你有三个选择：

  1. 从元素 上padding取下垂直线。#eventcontainer
  2. 添加overflow: hidden到body元素。但是，不建议这样做，因为在较小的屏幕上，用户将无法滚动查看所有内容。
  3. 正如下面带有链接的评论中所述，您可以更改您正在使用的盒子尺寸模型。
于 2013-02-03T15:22:59.820 回答