Question

试试这个展示：

<!doctype html>

<html>
    <head>
        <style>
            html {
                min-height: 100%;
                overflow-y: scroll;
            }
            body {              
                margin:     0;
                min-height: 100%;
                background: -o-linear-gradient(bottom right, rgb(230,0,230), rgb(150,0,250));
                background: -webkit-gradient(linear, left top, right bottom, from(#D0F), to(#50A));
                background: -moz-linear-gradient(to bottom right, indigo, violet);
                filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb830c', endColorstr='#ffbe0d');
            }
            #container {
                background: #0B0;
                min-height: 100%;
                width:      400px;
                margin:     0 auto;
            }
            #content {
                background: #A00;
                height:     200px;
                width:      300px;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="content"></div>
        </div>
    </body>
</html>

你会认为#container不会延伸，尽管设置为min-height: 100%。

设置html, body { height: 100%; }代替min-height: 100%将解决此问题，但是身体背景中的渐变将不再延伸，而是会重复。您可以通过将#content设置为高于当前窗口高度来验证这一点。说#content { height: 3000px; }

我可以修复它设置body { background-attachment: fixed; }但我希望它滚动，这并不能解决IE的问题。所以我需要在body和html上使用min-height。

当我使用#container时，为什么min-height不伸展？

编辑：它不是一个解决方案，但添加背景色（线性渐变渐变的相同颜色）使得height:100%变通方法也可以接受IE。所以在IE中，背景是滚动的，而在其他情况下则不是，渐变是线性的，而在其他的是径向的......但它确实没有太大的问题。

编辑：请注意Opera浏览器正确解释代码。

Answer 1

修改

这可能有帮助吗？ http://jsfiddle.net/HerrSerker/XnjRp/3/

我将渐变和滚动分离，不要滚动主体，而是滚动新的包装

原帖

min-height只能正常工作，如果每个父元素都有一个设定的高度，那么你需要

html, body {
  height: 100%;
}

洞穴：检查移动浏览器是否存在使用此

滚动和/或缩放的问题

http://jsfiddle.net/HerrSerker/XnjRp

Answer 2

你不能简单地做

html {
   height: 100%;
   background: -webkit-gradient(linear, left top, right bottom, from(#D0F), to(#50A));
   background: -moz-linear-gradient(to bottom right, indigo, violet);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb830c',
      endColorstr='#ffbe0d');
   background-attachment:fixed;
}

（免责声明：无法在我喜欢的浏览器上测试，抱歉。）

顺便说一句，你的渐变在不同的浏览器上有不同的颜色，你注意到了吗？

神秘的最小高度行为

2 个答案:

修改

原帖