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 に答える