Question

我的背景线性渐变重复超出了我的内容区域的末尾。我试过重复y并重复，我不知道还能做什么。以下是输出结果的预览：http://jsfiddle.net/derbyshirehayes/ZhsQH/

HTML代码：

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

<body>
    <div id="gradient_background">``
    <div id="wrap">
    <div id="padding1"></div>
    <div id="header">
        <img src="images/header.png"/>
    </div>
    <div id="padding1"></div>
    <div id="navigation_bar">
        <img src="images/navigation_bar.png"/>
    </div>
    <div id="padding"></div>
    <div id="content_area">
        <img src="images/content_area.png"/>
    </div>
    <div id="padding"></div>
    </div>
    </div>
</body>
</html>

CSS代码：

body {
    margin: 0px;
    padding: 0px;
}  

#wrap {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

#gradient_background {
    background-image: -webkit-linear-gradient(top, #8c9bb2 0%, #5b8fdf 100%);
    background-repeat: repeat-y;
}

#header {
    width: 900px;
    height: 100px;
    background-image: url('images/header.png');
    background-repeat: no-repeat;

}

#navigation_bar {
    width: 901px;
    height: 36px;
    background-image: url('images/navigation_bar.png');
    background-repeat: no-repeat;

}
/* Padding between navigation bar and content */
#padding {
    padding: 10px;
}

#padding1 {
    padding: 5px;
}
#content_area {
    width: 899px;
    height: 404px;
    background-image: url('images/content_area.png');
    background-repeat: no-repeat;

}

Answer 1

你需要给你的html 100％身高：

html{
  height: 100%;
}

因为身体看着它的父亲的高度（html）你可以看看这个fiddle。我画了所有不同颜色的div，以便你可以更好地区分它们

CSS中的线性渐变不会垂直重复

1 个答案: