2

我有html：

<!doctype html>
    <html>
    <head>
        <title>test</title>
        <meta charset="utf-8"/>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="viewport" content="width=device-width"/>
        <meta name="format-detection" content="telephone=no"/>
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
    <section class="container">
        //full html on jsfiddle
    </section>
    </body>
    </html>

我有 CSS

html, body {height:100%;margin:0;}
body {
    background-color:#f4cbc9;
    background-image: linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%);
    background-image: -o-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%);
    background-image: -moz-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(171,153,180)),color-stop(0.50, rgb(244,203,201)),color-stop(1, rgb(247,231,208)));
    background-image: -webkit-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%);
    background-image: -ms-linear-gradient(top, rgb(171,153,180) 0%, rgb(244,203,201) 50%, rgb(247,231,208) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ab99b4', endColorstr='#f4cbc9');
}

我需要背景（线性渐变）来获得全身高度。没有固定，没有重复。

请参阅JsFiddle

4

2 回答 2

15

使用min-height而不是height.

http://jsfiddle.net/CYrpd/6/

这将使 bg 拉伸到身体的完整尺寸，但永远不会小于窗口显示。

于 2012-10-24T20:39:24.597 回答
1

html {最小高度：100%; }

身体{最小高度：100%；}

这对我帮助很大

于 2013-11-29T15:01:00.290 回答