logo标签列表

背景色不能覆盖整个页面

cssbackgroundalignmentresolution
3
您可以在此处查看我的小网站链接。我有两个问题：
  1. 我使用css渐变来给我的背景上色。当使用高分辨率（例如1366*768）时，只有页面的一半被涂色。
  2. 我底部的“和平”按钮没有居中。当检查代码时，我注意到包含按钮的
    覆盖了容器，但我不知道原因。
此外，如果您不喜欢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>

有什么想法吗？谢谢！
2个回答
5

使用 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>
4
修复方法:

  1. For the 1st issue you have to give your html a height also, not just the body

    html { height: 100% }

  2. For the 2nd one you have to clear your floats: 

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

DEMO

谢谢！您能告诉我为什么要使用clear:both吗？再次感谢，它解决了我的问题... - Yotam
你可以在这里了解有关“清除浮动”的一些基础知识：http://css-tricks.com/the-how-and-why-of-clearing-floats/ - Zoltan Toth
margin:auto 会使按钮居中显示。 - Lee Goddard
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接