0

我无法让我的背景线性渐变重复超过我的内容区域的末尾。我已经尝试过重复和重复，但我不知道还能做什么。这是输出的预览：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;

}
4

1 回答 1

0

你需要给你的 html 100% 高度：

html{
  height: 100%;
}

因为 body 会查看它的父级 (html) 的高度你可以看看这个fiddle。我用不同的颜色绘制了所有的 div，这样你就可以更好地区分它们

于 2013-09-29T05:45:26.267 回答