当前位置：文江博客话题详情

为什么 min-height 在我的页面上不起作用？

发布于 2024-10-21 12:31:52 字数 238 浏览 8 评论 0原文

我对 body 元素的背景应用了渐变。然后我有一个容器（就在正文之后），其中应用了背景 .png 图像。渐变始终扩展至至少 100% 窗口高度，但容器 (#body2) 不会。

对于为什么这不起作用有什么建议吗？您可以在此处检查我的网页上的 HTML：http://www.savedeth.com/parlours/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深白境迁sunset 2024-10-28 12:31:52

在 html、body 和 #body2 元素上指定 height: 100%（第 1358 行）。

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

未在 IE 6 中测试，但可以在 7 中运行。

Specify height: 100% on the html, body and #body2 elements (line 1358).

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

Not tested in IE 6, works in 7 though.

回复收藏 0 原文

很糊涂小朋友 2024-10-28 12:31:52

使用 vh 而不是 % 对我有用，无需使用任何额外的技巧。

这就是我所拥有的：

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

其中 .wrapper 是您应用于容器/包装器或您希望拉伸屏幕高度的整个长度的内容主体的类。

当包装器内的内容小于或大于屏幕高度允许时，这将按照您的预期工作。

这应该适用于大多数浏览器。

Using vh instead of % worked for me without having to use any extra tricks.

This is what I have:

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

Where .wrapper is the class you apply to your container/wrapper or main body of content that you wish to stretch the full length of the screen height.

This will work as you would expect it to when the content within the wrapper is less or more than the screen height allows.

This should work in most browsers.

回复收藏 0 原文

辞取 2024-10-28 12:31:52

您将最小高度设置为 100%，这只会与填充空间的任何元素一样高。以像素表示最小高度。另外，请注意 IE6- 需要它自己的一组规则。请参阅http://davidwalsh.name/cross-browser-css-min-height 了解更多详情。

回复收藏 0 原文

涙—继续流 2024-10-28 12:31:52

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

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

position: absolute; works in most cases. For example:

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

回复收藏 0 原文

分開簡單 2024-10-28 12:31:52

完整答案

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

Complete Answer

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

回复收藏 0 原文

迷雾森÷林ヴ 2024-10-28 12:31:52

有些东西将你的 body 元素的高度设置为 320px（如果你查看 chrome 的检查元素），

因此 100% 是 320px。这就是为什么它仅以 320 像素高度的 100% 显示在页面顶部。

您必须设置一个高度才能使最小高度发挥作用。

所以一般情况下设置高度@100%应该可以。

回复收藏 0 原文

提笔落墨 2024-10-28 12:31:52

拧紧它。谁没有 javascript 呢？特别是对于这个人群。

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

Screw it. Who doesn't have javascript anyways? Especially for this demographic.

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

回复收藏 0 原文

~没有更多了~