背景颜色不包括页面

时间:2012-11-10 18:46:13

标签: css background alignment resolution

您可以查看我的小网站here。我有两个问题:

  1. 我使用css渐变为我的背景着色。使用高分辨率(例如1366 * 768)时,只有一半的页面被绘制。
  2. 我的“andale”按钮底部没有加工。我注意到在检查代码时,包含按钮的<div>覆盖容器,我不知道为什么。
  3. 另外,如果你不喜欢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 个答案:

答案 0 :(得分: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>

答案 1 :(得分:3)

修正:

  1. 对于第一期,你必须给html一个高度,而不仅仅是body

    html { height: 100% }
    
  2. 对于第二个,你必须清除你的花车:

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