4

この Web サイトからスクロールバーを削除する方法がわかりません。明らかに必要ありません。ページを 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 高くなっています。

次の 3 つのオプションがあります。

  1. 要素から垂直paddingを外し#eventcontainerます。
  2. 要素に追加overflow: hiddenしbodyます。ただし、画面が小さいと、スクロールしてすべてのコンテンツを表示する方法がないため、これはお勧めできません。
  3. 以下のリンク付きのコメントで述べたように、使用しているボックスのサイズ変更モデルを変更できます。
于 2013-02-03T15:22:59.820 に答える