css 为什么最小高度在我的页面上不起作用?

luaexgnf  于 2023-03-20  发布在  其他
关注(0)|答案(7)|浏览(125)

我在body元素的背景上应用了一个渐变,然后在body后面的容器上应用了一个background .png图像,渐变总是扩展到至少100%的窗口高度,但容器(#body2)没有。
有什么建议,为什么这不工作?你可以检查我的网页上的HTML在这里:http://www.savedeth.com/parlours/

xtfmy6hx

xtfmy6hx1#

htmlbody#body2元素上指定height: 100%(第1358行)。

html, body, #body2
{
    height: 100%;
    min-height: 100%;
}

未在IE6中测试,但在7中工作。

unftdfkk

unftdfkk2#

使用vh而不是%对我来说很有效,不需要使用任何额外的技巧。
这是我的

html, body, .wrapper {
    min-height: 100vh;
}

其中.wrapper是应用于容器/ Package 或内容主体的类,您希望将其拉伸到屏幕高度的全长。
当 Package 器中的内容小于或大于屏幕高度允许的值时,这将按您的预期工作。
这应该在大多数浏览器中工作。

qlzsbp2j

qlzsbp2j3#

你的最小高度设置为100%,这将只与填充空间的任何元素一样高。用像素表示你的最小高度。另外,注意IE6-需要它自己的规则集。更多细节请参见http://davidwalsh.name/cross-browser-css-min-height

yyyllmsg

yyyllmsg4#

position: absolute;适用于大多数情况。例如:

#body2 { 
    position: absolute;
    min-height: 100%;
}
0h4hbjxa

0h4hbjxa5#

完整答案

html, body {
  min-height: 100vh;
}
.wrapper {
  min-height: calc(100vh - <margin-top + margin-bottom>px);
}
ki0zmccv

ki0zmccv6#

你的body元素的高度被设置为320px(如果你查看chrome的inspect元素)
因此100%是320px。这就是为什么它只显示在页面的顶部与100%的320 px高度。
你必须设置一个高度,最小高度才能起作用。
因此,一般情况下,将高度设置为100%应该有效。

sycxhyv7

sycxhyv77#

管他呢,谁没有javascript呢,尤其是这个群体。

<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
    $("body").height($(window).height());
}
});
</script>

相关问题