所以我想做的是在标题和导航栏下面给整个网站的背景添加一个轻微的渐变。我想把这个添加到主体上，容器上没有背景。结果是，如果我给容器设置渐变，它就会应用到容器上，而body则以任意颜色留在下面，或者只是留白。
如果我将主体设置为渐变，并将容器背景设置为none，我会在容器背景上得到一个奇怪的深色渐变，并在页面的下半部分(主体部分)得到正确的渐变。下面是完成此操作的代码:
我的HTML:
<body>
<div id="header">
<h1>stuff</h1>
<p>more stuff</p>
</div>
<div id="navbar"></div>
<div id="container">
<div id="main_text">
main text of site
</div>
</div>
</body>
#container {
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background: none;
}
#navbar {
padding: 0px;
height: 30px;
width: auto;
background-position: bottom;
background-color: #000;
}
#main_text {
margin: auto;
margin-top: 20px;
overflow: hidden;
width: 1000px;
border: 1px outset #000;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #FFF;
}
#header {
height: 100px;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
background-color: #FFF;
background: linear-gradient(to bottom, #86b9e0 0%,#2989d8 50%,#0e75c9 100%);
}
body {
padding: 0px;
margin: 0px;
background: linear-gradient(to bottom, #e5e5e5 0%,#afafaf 53%,#a0a0a0 100%);
}
我不确定是否有一些非常简单的东西我错过了，或者如果我应该以一种完全不同的方式设计页面。非常感谢任何协助。谢谢!
尝试添加到你的css:
html, body {
min-height: 100%;
height: auto;
}
这将强制正文至少占据视口的高度。
在这里检查一个例子:http://jsfiddle.net/ZzArv/