Question

我有一页

http://uberhealth.co/register.php

我已设置属性以将min-height设置为100%，但仍然可以看到页脚不在底部，因此高度未设置为100%。我该如何解决这个问题？

更新

我已经在那里

html, body{
   height:100%;
}

和body的容器类

.cbody-full { min-height:100%; }

Answer 1

虽然您为min-height元素设置了<html>（百分比）值，但它没有明确的height值。因此，min-height属性无法正常用于<body>元素。

来自 MDN ：

min-height

百分比是根据高度来计算的   生成的框包含块。如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的百分比   值被视为0。

您可以为height元素设置100% <html>，为min-height: 100%;设置<body>。

html { height: 100%; }
body { min-height: 100%; }

更新＃1

这是我尝试解决您的布局问题。

首先请注意，如果要将height用于子元素，则必须指定父元素的min-height。< / p>

您在彼此内部有多个包装器，将所有min-height: 100%声明更改为height: 100%（包括html，body，...）;并使用min-height: 100%作为.cbody-full > container元素。

然后，您可能会面对垂直滚动条。那是因为标题的计算height和页脚被添加到屏幕高度的100%（事实上{{1}元素的高度为.cbody-full > container）。

您可以通过在100%元素中添加负顶部/底部margin来解决此问题：

.cbody-full > container

但是，这导致容器越过页眉和/或页脚。为了解决这个问题，您可以为容器设置顶部/底部.cbody-full > container { min-height: 100%; margin-bottom: -50px; margin-top: -55px; }，并使用padding计算包含填充和边框的框的宽度和高度：

box-sizing: border-box

还有一件事，您可能需要为页眉和页脚元素设置.cbody-full > container { min-height: 100%; margin-bottom: -50px; box-sizing: border-box; padding-bottom: 50px; margin-top: -55px; padding-top: 55px; }属性，如下所示：

z-index

更新＃2

如果您考虑使用 Ryan fait的 sticky footer ，请注意页脚不应位于{{1>内元素，它应该在旁边。这就是它不会停留在页面底部的原因。

因此，您可以按如下方式更改标记：

#navbar, /* The header (navigation in this case) */
.footer { 
  position: relative;
  z-index: 100;
}

然后，对于.cbody-full和<body> <nav id="navbar"></nav> <div class="cbody-full"></div> <div class="footer"></div> </body>属性，以及导航和height和min-height，请按照上述方法操作>页脚。最后，对position元素使用以下内容：

z-index

Answer 2

即使您不将min-height:100%始终置于100％。高度总是相对于总是给定高度不是静态定义的内容

使用具有100％值的min-height属性时，为什么体高不是100％

更新

2 个答案:

更新＃1

更新＃2