CSS3 线性渐变 100% 高度不固定答案

【问题标题】：CSS3 linear-gradient 100% height not fixedCSS3 线性渐变 100% 高度不固定
【发布时间】：2012-10-14 23:15:05
【问题描述】：

我有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

【问题讨论】：

无论是1000px还是5000px，你想让渐变拉伸整个文档的高度吗？

标签： css background height

【解决方案1】：

使用min-height 而不是height。

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

这将使背景拉伸到主体的全尺寸，但绝不会小于窗口显示的尺寸。

【讨论】：

【解决方案2】：

html {最小高度：100%; }

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

这对我帮助很大

【讨论】：