0

在下一页中，如果视口高于#container(600px)，则 css 渐变正确渲染。但是如果视口只有 400px，那么在底部 200px（视口外）就缺少渐变。

我该如何解决？

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Test-Site for css gradient</title>
  <style type="text/css">
    body {
    margin: 0;
    }

    html, body, #body-wrapper {
        height: 100%
    }

    #body-wrapper {
        background-repeat: no-repeat;
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(131,20,20,1)),
            to(rgba(243,172,149,1)),
            color-stop(0.2, rgba(159,19,24,1)),
            color-stop(0.7, rgba(222,0,30,1))
        );
        background-image: 
        -webkit-linear-gradient(
            top,
            rgba(131,20,20,1),
            rgba(159,19,24,1) 20%,
            rgba(222,0,30,1) 70%,
            rgba(243,172,149,1)
        );
        background-image: 
        -moz-linear-gradient(
            top,
            rgba(131,20,20,1),
            rgba(159,19,24,1) 20%,
            rgba(222,0,30,1) 70%,
            rgba(243,172,149,1)
        );
        background-image: 
        -o-linear-gradient(
            top,
            rgba(131,20,20,1),
            rgba(159,19,24,1) 20%,
            rgba(222,0,30,1) 70%,
            rgba(243,172,149,1)
        );
        background-image: 
        linear-gradient(
            top,
            rgba(131,20,20,1),
            rgba(159,19,24,1) 20%,
            rgba(222,0,30,1) 70%,
            rgba(243,172,149,1)
        );
    }

    #container {
        max-width: 900px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid black;
        height: 600px;
    }
  </style>
</head>

<body>

  <div id="body-wrapper">
    <div id="container">

    </div>
  </div>

</webl:context>  
</body>
</html>

编辑：在这里您可以在线查看：Test-Site

4

2 回答 2

0

必须在#container 中尝试这种风格：

display:block;
overflow:hidden;
于 2012-07-15T18:19:18.617 回答
0

发生这种情况是因为height: 100%将文档、<body>元素和您的高度设置<div id="body-wrapper">为与视口匹配（在这种情况下，视口小于内容的高度）。

添加min-height: 600px到html, body, #body-wrapper?

于 2012-07-15T18:21:07.097 回答