Question

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

Answer 1

使用min-height代替height。

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

这将使bg伸展到身体的整个尺寸，但绝不会小于窗口显示。

Answer 2

html {min-height：100％; }

body {min-height：100％; }

这对我有很多帮助

CSS3线性渐变100％高度不固定

2 个答案: