0

所以我想要做的是在标题和导航栏下方的整个网站背景中添加一个轻微的渐变。我想将它添加到正文中，并且容器上没有背景。发生的情况是，如果我将容器设为渐变，它会应用于容器，并且主体会留在下方，无论颜色如何，或者只是空白。

如果我将主体设置为渐变，并将容器背景设置为无，我将在容器背景上得到一个奇怪的较暗渐变，并且在页面的下半部分（主体部分）上得到正确的渐变。这是执行此操作的代码：

我的 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%);
}

我不确定我是否缺少一些非常简单的东西，或者我是否应该以完全不同的方式设计页面。任何帮助将不胜感激。谢谢！

4

1 回答 1

2

尝试将此添加到您的CSS：

html, body {
min-height: 100%;
height: auto;    
}

这迫使身体至少占据视口的高度。

在此处查看示例：http: //jsfiddle.net/ZzArv/

于 2013-04-04T17:33:23.643 回答