背景顏色不包括頁面

你可以看看我的小網站here。我有兩個問題：背景顏色不包括頁面

我使用css漸變爲我的背景着色。當使用高分辨率（例如1366 * 768）時，只有一半的頁面被繪製。
底部的我的「andale」按鈕沒有塗上字跡。我注意到當檢查代碼時，包含按鈕的<div>覆蓋了容器，我不知道爲什麼。

另外，如果你不喜歡的jsfiddle，這裏是我的代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Rock-paper-scissers</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<script src="rps.js"></script> 
<style type="text/css"> 
body{ 
    height: 100%; 
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c)); 
    background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c); 
    background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c); 
    background-repeat: no-repeat; 
} 
div#container { 
    text-align: center; 
    width: 80%; 
    margin: 0 auto; 
} 
div.InnerLeft { 
    width: 50%; 
    position: relative; 
    float: left; 
} 
div.InnerRight { 
    width: 50%; 
    position: relative; 
    float: right; 
} 
select { 
    background: transparent; 
    margin-top: 15px; 
    width: 220px; 
    font-size: 16px; 
    -webkit-appearance: none; 
    border: 0px; 
    height: 34px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<img src="header.png"> 
<div class="InnerLeft"> 
<img src="uno.png"><br> 
<select id="p1" onchange="change('p1','rpsleft')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rpsL.png" id="rpsleft"></p> 
</div> 
<div class="InnerRight"> 
<img src="dos.png"><br> 
<select id="p2" onchange="change('p2','rpsright')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rps.png" id="rpsright"></p> 
</div> 
<div id="footer"> 
<img src="andale.png" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)" 
onMouseOver="document.getElementById('andale').src='andale2.png'" 
onMouseOut="document.getElementById('andale').src='andale.png'"> 
</div> 
</div> 
</body>

任何想法？謝謝！

來源

2012-11-10 Yotam

使用html {min-height: 100%;}，不height:100%;因爲如果你的頁面有很長的高度，你不會看到所有的頁面，因爲100％是瀏覽器

的高度，並以中心加入#footer {text-align:center;}您圖像按鈕

所有代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Rock-paper-scissers</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<script src="rps.js"></script> 
<style type="text/css"> 

html {min-height:100%; 
} 
body{ 
    height: 100%;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c)); 
    background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c); 
    background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c); 
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif; 

    background-repeat: no-repeat; 
    margin: 0; 
    padding: 0; 
} 
div#container { 
    text-align: center; 
    width: 80%; 
    margin: 0 auto; 
} 
div.InnerLeft { 
    width: 50%; 
    position: relative; 
    float: left; 
} 
div.InnerRight { 
    width: 50%; 
    position: relative; 
    float: right; 
} 
select { 
    background: transparent; 
    margin-top: 15px; 
    width: 220px; 
    font-size: 16px; 
    -webkit-appearance: none; 
    border: 0px; 
    height: 34px; 
} 

#footer {text-align:center;} 
</style> 
</head> 
<body> 
<div id="container"> 
<img src="header.png"> 
<div class="InnerLeft"> 
<img src="uno.png"><br> 
<select id="p1" onchange="change('p1','rpsleft')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rpsL.png" id="rpsleft"></p> 
</div> 
<div class="InnerRight"> 
<img src="dos.png"><br> 
<select id="p2" onchange="change('p2','rpsright')"> 
<option value=0>Choose your weapon</option> 
<option value=1>Rock</option> 
<option value=2>Paper</option> 
<option value=3>Scissors</option> 
</select> 
<p><img src="rps.png" id="rpsright"></p> 
</div> 
<div id="footer"> 
<img src="andale.png" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)" 
onMouseOver="document.getElementById('andale').src='andale2.png'" 
onMouseOut="document.getElementById('andale').src='andale.png'"> 
</div> 
</div> 
</body>

來源

2012-11-10 19:24:42

的修正：

對於你必須給你的html的高度也第1期，不只是body
```
html { height: 100% } 
```

對於你要清楚你的花車：第二個：

#footer { 
    clear: both; 
    text-align: center 
}

DEMO

來源

2012-11-10 18:53:21

謝謝！你能告訴我爲什麼使用清楚：兩者？再次感謝你，它解決了我的問題...... – Yotam

你可以閱讀一些關於清理浮動的基礎知識[here]（http://css-tricks.com/the-how-and-why-of-clearing-floats /） –

'margin：auto'將使按鈕居中 – LeeGee

背景顏色不包括頁面

回答

相關問題