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

Question

我在

http://uberhealth.co/register.php

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

更新资料

我已经给了

html, body{
   height:100%;
}

和身体的容器类

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

Answer 1

尽管您已经为<html>元素设置了min-height （百分比）值，但是它没有明确的height值。 因此， min-height属性不适用于<body>元素。

从MDN ：

min-height

相对于生成的盒子的包含块的高度计算百分比。 如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则将百分比值视为0。

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

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

更新＃1

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

首先要注意，你必须指定height的父元素，如果想用min-height为子元素。

彼此之间有多个包装器，将所有的min-height: 100%声明更改为height: 100% （包括html ， body ，...）； 并对.cbody-full > container元素使用min-height: 100% 。

然后，您可能面对垂直滚动条。 这是因为所计算的height的头和页脚添加到100%的画面（实际上的高度的.cbody-full > container元件具有的高度100%

您可以通过在.cbody-full > container元素中添加负的上下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;
}

只是一件事，您可能需要为header和footer元素设置z-index属性，如下所示：

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

更新＃2

如果您考虑使用Ryan fait的 粘性页脚 ，请注意，页脚不应位于.cbody-full元素内部，而应位于该元素的旁边。 这就是为什么它不停留在页面底部的原因。

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

<body>
    <nav id="navbar"></nav>
    <div class="cbody-full"></div>
    <div class="footer"></div>
</body>

然后，按照上述方法获取height和min-height属性，以及导航和页脚的 position和z-index 。 最后，将以下内容用于.cbody-full元素：

.cbody-full {
  min-height: 100%;
  margin-bottom: -50px;
  box-sizing: border-box;
  padding-bottom: 50px;
  margin-top: -55px;
  padding-top: 55px;
}

Answer 2

即使您不将min-height:100%始终设置为100％。 高度始终与内容有关，因为高度不是静态定义的

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

问题描述

更新资料

2 个解决方案

解决方案1
3 已采纳 2014-02-15 17:04:53

更新＃1

更新＃2

解决方案2
0 2014-02-15 17:07:35

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

问题描述

更新资料

2 个解决方案

解决方案1 3 已采纳 2014-02-15 17:04:53

更新＃1

更新＃2

解决方案2 0 2014-02-15 17:07:35

解决方案1
3 已采纳 2014-02-15 17:04:53

解决方案2
0 2014-02-15 17:07:35