Question

我有一个简单的页面，中间有一个.container，要求提供一些用户信息：

height: auto;              width: 300px;
background: white;         margin-left: auto;
margin-top: 10%;           margin-right: auto;
padding: 50px 20px 20px;   border-radius: 3px;
-moz-border-radius: 3px;   -webkit-border-radius: 3px;

在此之下，我有三个单独的部门，使用position: fixed;定义，例如：

position: fixed;      z-index: -10;
bottom:2%;            width: 100%;
text-align: center;   color: #eaeaea;

现在问题是如果我在我的身体标签上使用渐变，它只是覆盖容器所在点的背景。之后它停止这样做：

body {
background-color: #851207 no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(133, 18, 7)), to(rgb(83, 9, 3))) no-repeat;
background-image: -webkit-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: -moz-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: -o-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: -ms-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#851207', EndColorStr='#530903') no-repeat;
}

我在这里使用no-repeat，因为否则它会重复渐变，中间有一条突出的线。我还尝试将渐变用于另一个div

有什么建议吗？

Answer 1

您必须为html元素提供宽度/高度：

html {
    width: 100%;
    height: 100%;
}

<强> DEMO

Answer 2

Juste给你的身体增加了一个最小高度。

body {
    min-height: 100%;
}

背景未应用于整个屏幕

2 个答案: