Html 如果主体具有最小高度，则CSS高度不起作用_Html_Css_Layout_Height

Html 如果主体具有最小高度，则CSS高度不起作用

html css layout

Html 如果主体具有最小高度，则CSS高度不起作用,html,css,layout,height,Html,Css,Layout,Height,如果身体指定了min height，我不会让我的第一个孩子达到100%的身高 <html> <head> <style> html { height:100%; } body { min-height:100%; } #wrapper {

如果身体指定了

min height

，我不会让我的第一个孩子达到100%的身高

<html>
    <head>
        <style>
            html {
                height:100%;
            }
            body {
                min-height:100%;
            }
            #wrapper {
                height:100%;
                min-width:1120px; /* 250px each side (content width is 870px) */
                max-width:2000px;
                background-image:url(bg.png);
                background-position:50% 25px;
                background-repeat:no-repeat;
                background-size:cover;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- web content -->
        </div>
    </body>
</html>


html{
身高：100%；
}
身体{
最小高度：100%；
}
#包装纸{
身高：100%；
最小宽度：1120px；/*250px每侧（内容宽度为870px）*/
最大宽度：2000px；
背景图片：url（bg.png）；
背景位置：50%25px；
背景重复：无重复；
背景尺寸：封面；
}

这不会根据窗口的高度调整包装的大小。当我移除

min-

并使用

height

时，它会工作。但我必须有内容高度变量

我确实在SO和google上找到了一些其他帖子，但它们只有问题，没有解决方案。

当你为

高度

使用一个百分比值时，它总是相对于父元素指定的

高度

。不是父元素的实际高度，而是CSS中指定的

高度
因此，当主体
元素未指定高度
（仅最小高度
，但不计算在内）时，100%
将无法生效
一种可能的解决方案是使用位置：绝对；排名：0；底部：0#包装上的code>，您的div将被拉伸。当然，这可能会产生一些您不希望的布局后果
我真的找到了解决办法
现在我有：
html, body {
    height:100%;
}

所以我的身体不是最小高度
。我不记得为什么我把它改成了minheight
，但我希望我不会面对我不久前明显面临的问题…简短回答
使用<代码>高度：100vh对于要拉伸并填充屏幕的div
不要设置身体的高度：100%如果您的页面内容高度超过100%，它将破坏整个站点。他们将无法滚动
长话短说
如果您希望网站的一些页面填满整个屏幕，同时仍允许其他页面滚动（因为它们的内容高度超过100%），则需要将div height设置为100%，而不是整个网站的正文高度
将其用作一般站点范围的css：
html {
    height: 100%;
}

body {
    min-height: 100%;
}

然后设置特定的div以填充整个屏幕（当其内容高度小于100%时）：
vh测量的解释：
我已经担心这个事实：（我试图让我的#wrapper
在任何情况下都处于底部。因此，如果内容较小，它必须是100%的html，否则它必须与内容一样高。这与位置：绝对不起作用。遗憾的是，这似乎无法实现。但非常感谢。任何其他想法都值得赞赏；）我确实找到了一个解决方案…我实际上已经有了，所以我不记得为什么我再次更改了它谢谢你的精彩解释！@Julian好吧，如果你在绝对定位包装上加上overflow:auto
，它看起来肯定会很好。虽然我不知道具体的特殊要求是什么。但是，嗯…你不想min-hei吗如果我没弄错的话，在你的#wrapper
元素上，而不是body
上？杰普-对。但是body本身不够大，不知怎么的，它都被拧紧了，但你在问题中说你已经知道它与高度一起工作了（我不知道那里发生了什么，不知怎么的，它都被拧紧了，但现在它可以工作了-不明白：）但在这种情况下，你不能使用PageUp/Down和页面总是在重新加载后向上滚动。如果你的网站的其他页面的内容高度超过100%，这将破坏它们。我的回答解释了如何做到两全其美。这救了我一天。对不起，但是。。。不@ApynAOM不幸的是，这是开发人员有意做出的决定（）尝试在移动设备上提供真正的全屏体验需要比这一css设置付出更多的努力。如果这就是你想要的，这篇文章看起来很有帮助。
/* Set any div heights to 100% of the screen height*/
.div {
    height:100vh;
}