Css 神秘的最小高度行为_Css

Css 神秘的最小高度行为

css

Css 神秘的最小高度行为,css,Css,试试这个展示： <!doctype html> <html> <head> <style> html { min-height: 100%; overflow-y: scroll; } body { margin: 0;

试试这个展示：

<!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>


html{
最小高度：100%；
溢出y：滚动；
}
正文{
保证金：0；
最小高度：100%；
背景：-o线性梯度（右下角，rgb（230,0230），rgb（150,0250））；
背景：-webkit渐变（线性、左上、右下、从（#D0F）到（#50A））；
背景：-莫兹线性梯度（至右下角，靛蓝，紫色）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#eb830c'，endColorstr='#ffbe0d'）；
}
#容器{
背景：#0B0；
最小高度：100%；
宽度：400px；
保证金：0自动；
}
#内容{
背景：#A00；
高度：200px；
宽度：300px；
}

尽管设置了

最小高度：100%

，但您会认为

#容器不会拉伸
设置html，body{height:100%；}
而不是min height:100%
将解决此问题，但是body背景中的渐变将不再拉伸，而是重复。您可以通过将#content
设置为高于当前窗口高度来验证这一点。说出#内容{高度：3000px；}

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

当我使用最小高度时，#容器
为什么不拉伸
编辑：这不是一个解决方案，但添加背景色（与线性渐变淡出的颜色相同）使IE也可以接受高度：100%
解决方案。因此，在IE中，背景是滚动的，而在其他浏览器中不是滚动的，渐变是线性的，而在其他浏览器中是径向的。。但这真的不是什么大问题
编辑：请注意，Opera浏览器可以正确解释代码。EDIT
也许这有帮助？


我通过一个新的滚动包装器而不是滚动主体，将渐变和滚动解耦

原职
如果每个父元素都有一个设置的高度，那么“最小高度”只能正常工作，因此需要
html, body {
  height: 100%;
}

Cave：检查移动浏览器是否有滚动和/或缩放的问题
你就不能这么做吗
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;
}

（免责声明：抱歉，我无法在尽可能多的浏览器上进行测试。）
顺便说一下，您的渐变在不同的浏览器上有不同的颜色，您注意到了吗？
检查此链接，这可能会对您有所帮助。但我对此不确定。不，这是float
属性的问题。不是我的情况，“但是身体背景中的梯度不会再拉伸，而是会重复。”@BoltClock我在小提琴上有一个小错误。尝试新的（已编辑的）最小高度应起作用，即使父级具有最小高度。。通常是这样，但在这种情况下不是这样。设置height:100%
没有多大帮助，因为它会产生原始帖子中描述的问题（请阅读）。@user1168006为什么你认为min height
在其他情况下可以工作，但在本例中不行，因为它当然可以。仅凭html和body，按照标准，它的行为并不具有预测性。代码在Opera中运行良好，因此其他浏览器的错误在于没有将正确的窗口高度提供给min height（或类似的东西）。是的，这只是一个测试。样式设置html
而不是body
不会改变thing@user1168006哎呀，我忘了复制背景附件：修复了位。我的错。查看我编辑的代码。