Question

在下一页中，如果视口高于#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

Answer 1

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

display:block;
overflow:hidden;

Answer 2

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

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

CSS渐变仅适合视口

2 个答案: