刪除顯然不需要的垂直滾動條

我無法弄清楚如何從本網站中刪除滾動條。顯然沒有必要。我有一個裝21" 頁顯示器，仍然可以看到它..刪除顯然不需要的垂直滾動條

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

這裏是我的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>

的HTML是有在那裏使它延伸過什麼100％？我試着讓身高達到100％，但看起來並不起作用。

如果我不使身高達到100％，我的右列將不會全部向下延伸

來源

2013-02-03 AKrush95

您的高度爲100％，頂部填充10px，底部填充10px。填充被添加到高度，不包含在其中。因此#eventcontainer的總高度爲100％+ 10px + 10px，即比其容器高20px。

你有三個選擇：

採取垂直padding關閉#eventcontainer元素。
添加overflow: hidden到body元素。但是不建議這樣做，因爲更小的屏幕上，用戶不會有任何的方式來滾動查看所有內容。
正如下面鏈接的評論中提到，你可以改變你使用的是盒子規模模型。

來源

2013-02-03 15:22:59 leftclickben

也可以改變'盒大小：邊界box'改變高度和填充方式加在一起：http://paulirish.com/2012/box-sizing-border-box-ftw/ –

哦，哇。我不知道存在！這是** **真棒更新:-D答案，因爲每個人都應該知道這一點。 – leftclickben

刪除顯然不需要的垂直滾動條

回答

相關問題