渐变未出现在页脚部分

Question

I am designing a web page for my website. 我正在为我的网站设计一个网页。 I have used a top-to-bottom color gradient in the body. 我在体内使用了从上到下的颜色渐变。 The color gradient appears throughout the 2/3 of the body but misses the 1/3 of the body down near the footer section. 颜色渐变出现在整个身体的2/3处，但在页脚部分附近向下错过了身体的1/3。

在此处输入图片说明

My CSS : 我的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;
}

Markup : 标记：

<!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>

PS : I have tried it in Chrome and Firefox PS：我已经在Chrome和Firefox中尝试过

Answer 1

Add following to your CSS: 将以下内容添加到您的CSS中：

html,body{
    height:100%;
}

See DEMO here. 在这里查看演示。

渐变未出现在页脚部分

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-08-09 06:48:08

渐变未出现在页脚部分

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-08-09 06:48:08

解决方案1
1 已采纳 2014-08-09 06:48:08