我有一个页面在
http://uberhealth.co/register.php
我已经设置属性以将 min-height
设置为 100%
但仍然如您所见,页脚不在底部,因此高度没有得到设置为 100%
。我该如何解决这个问题?
更新
我已经给了那里
html, body{
height:100%;
}
和主体的容器类
.cbody-full { min-height:100%; }
最佳答案
虽然你设置了一个min-height
<html>
的(百分比)值元素,它没有明确的 height
值(value)。因此,min-height
属性不适用于 <body>
元素正确。
来自 MDN :
min-height
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.
你可以设置一个 height
的 100%
对于 <html>
元素,和 min-height: 100%;
对于 <body>
.
html { height: 100%; }
body { min-height: 100%; }
更新 #1
这是我为解决您的布局问题所做的尝试。
首先请注意,您必须指定 height
parent 元素的,如果要使用 min-height
对于 child 元素。
你有多个包装器,改变了所有的 min-height: 100%
对 height: 100%
的声明(包括 html
, body
,...);并使用 min-height: 100%
对于 .cbody-full > container
元素。
然后,你可能会面对垂直滚动条。那是因为计算出的 height
header 和 footer 添加到 100%
屏幕高度(事实上 .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
页眉和页脚元素的属性,如下所示:
#navbar, /* The header (navigation in this case) */
.footer {
position: relative;
z-index: 100;
}
更新 #2
如果您考虑使用 Ryan fait 的 sticky footer ,请注意页脚 不应位于.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;
}
关于html - 为什么在使用具有 100% 值的最小高度属性时高度不是 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21800762/