Question

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

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

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

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

Answer 1

尝试将此添加到您的css：

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

这会强制身体至少占据视口的高度。

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

CSS：渐变仅适用于背景的一半，但背景基色适用于整页？

1 个答案: