html - 为什么在使用具有 100% 值的最小高度属性时高度不是 100%

标签 html css

我有一个页面在

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.

你可以设置一个 height100%对于 <html>元素,和 min-height: 100%;对于 <body> .

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

更新 #1

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

首先请注意,您必须指定 height parent 元素的,如果要使用 min-height对于 child 元素。

你有多个包装器,改变了所有的 min-height: 100%height: 100% 的声明(包括 htmlbody ,...);并使用 min-height: 100%对于 .cbody-full > container元素。

然后,你可能会面对垂直滚动条。那是因为计算出的 height headerfooter 添加到 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属性,以及 positionz-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/

相关文章:

javascript - 将悬停下拉功能更改为单击功能

html - Ionic App 拉起/拉下时的空白空间

javascript - 如何让两个垂直的 jQuery UI 进度条彼此相邻?

javascript - Bootstrap 选项卡中的分页

javascript - 防止网站在加载时跳转

CSS:基于相邻元素类的条件格式

html - GitHub Markdown 接受哪​​些内联 HTML 样式?

javascript - 从另一个页面 JavaScript 中提取字符串

html - 填充列的行高 - Bootstrap 布局

css - Chrome 不显示谷歌网络字体