Question

我正在为我的网站设计一个网页。我在身体中使用了从上到下的颜色渐变。颜色渐变出现在整个身体的2/3处，但是在页脚部分附近错过了身体的1/3。

enter image description here

我的CSS：

body{
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #D4D9E9 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #D4D9E9 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #D4D9E9 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #D4D9E9));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D4D9E9 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #D4D9E9 100%);
margin: 0px 0px 0px 0px;
}

.headerMenu{

background-image: url(../img/headerMenu.png);

height: 75px;
border-top: 0px;
border-bottom: 0px;
padding-top: 0px;
padding-left: auto;
padding-right: auto;
width: 100%
}


#wrapper{
background-image: url(../img/headerMenu.png);
margin-right: auto;
margin-left: auto;
width: auto;
padding-top: 0px;
padding-bottom: 0px;
}


.logo{

float:left;
padding-top: 11px;
padding-left: 170px;
padding-bottom: 25px;
width: 80px;
}

.logo img
{
display:inline-block;
width: 180px;
height: 60px;
}

.objective
{
font-family: Helvetica;
font-weight: bold;
font-size: 150%;
font-style: oblique;
padding-top: 30px;
padding-left: 130px;
}

.holder{

padding-left: 90px;
}

标记：

<!doctype html>

<head>

    <title>Lorem Ipsum</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>

    <div class="headerMenu">
        <div id="wrapper">
            <div class="logo">
                    <img src="./img/logo-final.png"/>

                </div>

            </div>  
        </div>
    <div class="objective">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</br>
incididunt ut labore et dolore magna aliqua
    </p>
    </div>
    </div>


<div class=holder>
        <img src="./img/map.png">
</div>
</body>

P.S。：我在Chrome和Firefox中尝试过它

Answer 1

在CSS中添加以下内容：

html,body{
    height:100%;
}

请在此处查看DEMO。

页脚部分没有出现渐变

1 个答案: