div 不占用整个高度/不是 100%答案

【问题标题】：div doesn't take the whole height / is not 100%div 不占用整个高度/不是 100%
【发布时间】：2022-04-21 11:20:42
【问题描述】：

这是实时链接：http://mrgsp.md:8080/a/Account/SignIn

主 div（绿色）没有占据屏幕高度的 100%

只有当你有大屏幕时你才会注意到这一点

而且代码基本上是

<body>
<div class="loginpage">
<div id="loginbox">stuff inside loginbox</div>
</div>
</body>

.loginpage {
background:none repeat scroll 0 0 green;
padding:200px;
}

【问题讨论】：

仅供参考 - 我无法查看该页面。它是在 Intranet 上还是关闭了端口 8080？也许张贴截图，也张贴有问题的代码。
好的，可能仅限于我的国家，我会发布截图和代码
为什么会这样？它具有内部 div 的高度 + 自己的填充。另外，为什么不将绿色背景放在 body 元素上？然后它会为所有页面着色（我猜这是你的问题，对吧？）。
@Michael La Voie 我添加了截图和代码
@Sautieh 是的，将颜色设置为主体也可能是一种解决方案；不能将 div 的高度设置为可用高度的 100% 吗？就像一个高度 = 100% 的表格一样

标签： html css

【解决方案1】：

对不起我的英语...

把背景样式放在body...更好。

body{
    background: green;
}

如果您仍想为 div 设置高度，则必须为 div、body 和 HTML 设置 100% 的高度。

html, body, .loginpage{
    height: 100% ;
}

【讨论】：

【解决方案2】：

你可以给身体设置绿色背景色吗？

【讨论】：

或者如果由于某种原因你需要内部 div 为绿色而 body 仍为白色：html,body{ height:100%; } #main-container{ 高度：100%;最小高度：100%； }

【解决方案3】：

您不能简单地将 div 高度设置为 100%，因为it will interpret that as 100% of its container。

解决您的问题的最简单方法是在 body 元素上设置背景颜色，但也可以使用您的方法，将 body 标签设置为 100% 的高度。这将使您的 div 有一些东西可以完全填充。如果 div 的 body 或任何容器没有设置高度，则浏览器默认 div 的 css 属性为 height: auto。

【讨论】：