Question

我正在开发一个移动网站，其结构看起来像这样：

body
---->Mobile container div (height 100%)
-------->Full page div (height 100%)
------------>Vertically centered div (height 200px)

我的问题是整页div级别为0px。这是相关的CSS：

html, body
{
    height: 100%;
    margin: 0;
}

.mobile
{
    min-height: 100%;
}

.full-page
{
    height: 100%;
    position: relative;
}

.center
{
    height: 200px;
    top: 50%;
    margin-top: -100px;
    position: absolute;
}

移动容器正在填充窗口高度，但整页（移动容器高度的100％）正在以0px高度渲染，这会破坏垂直居中。

为什么会这样？

JSFiddle

红色div是移动容器
黄色div是整页div（因为它的高度为0px所以不可见）
绿色div是垂直居中的div

Answer 1

由于以下原则，这种情况正在发生：

.mobile {
   min-height: 100%;
}

这就是原因。

CSS specs告诉我们以下百分比高度：

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为auto。根元素的百分比高度相对于初始包含块。

这适用于您的.fullpage容器。您可以看到.fullpage的父容器.mobile没有明确设置高度，而是通过min-height属性设置：

min-height属性用于设置给定元素的最小高度。它可以防止height属性的使用值变得小于为min-height指定的值。

您可能会认为子容器.fullpage在确定其高度时会考虑min-height属性，但事实并非如此。如果仅使用min-height，浏览器将不会根据父元素的计算高度设置子元素的高度（以百分比指定）。

要更正此问题，您可以将height: 100%添加到：

.mobile {
   min-height: 100%;
}

嵌套100％的高度

JSFiddle

1 个答案: