所以我想做的是在标题和导航栏下方的整个网站背景中添加一个轻微的渐变。我想将它添加到正文中，并且容器上没有背景。发生的情况是，如果我将容器设置为渐变，它会应用于容器，并且主体将保留在下方，无论颜色是什么，或者只是空白。
如果我将主体设置为渐变，并将容器背景设置为无，我将在容器背景上得到一个奇怪的深色渐变，并在页面的下半部分(主体部分)得到正确的渐变。这是执行此操作的代码:
我的 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>
这是我的 CSS:
#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;
}
这会强制 body 至少占据视口(viewport)的高度。
在这里查看示例: http://jsfiddle.net/ZzArv/
关于html - CSS:渐变仅适用于背景的一半，但背景底色适用于整个页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15817728/