即使 html 和 body 是 Container Fluid 的高度也不是 100%

Question

我有以下布局（我正在使用 Meteor）：

<template name="headerFooter">
    <div class="container-fluid fill-height">
        {{> header}}

        {{> UI.contentBlock}}

        {{> footer}}
    </div>
</template>

<template name="home">
    {{#headerFooter}}
        <div class="row body-film">
            <div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
                {{#each stories}}
                    <div class="story">...</div>
                {{/each}}
            </div>
        </div>
    {{/headerFooter}}
</template>

还有这个（相关的）css 支持它：

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

html 和 body 元素的行为都符合预期。它们以任何缩放级别或大小填充其区域。

但是，添加了 fill-height 类的 container-fluid 并没有完成这项工作。它只是包装它的内容，而不是填充到底部。这是一个问题，因为它负责将body-film 和block-film 添加到页面中，它们只是半透明背景，以使整个事物具有一定的色彩统一性。

这里有一些截图，页面都被缩小了，所以内容没有填满高度：

现在这里选择了body 元素。如您所见，它很好地填充了父级。

但container-fluid 没有。

fill-height 我试过height 和min-height，它们看起来完全一样。

感谢您的帮助！

更新

我已经在这三个元素上尝试了min-height 和height 的所有可能组合，但没有任何效果。

height在所有三个作品上的内容对于视口来说太小，但是当内容对于视口来说太大时，内容块会完全溢出body，这意味着电影太短了为它。

min-height 在我看来这三个都是最合乎逻辑的方法，但是当内容太小时它会中断。在这种情况下，body 元素不会拉伸以填充其 html 父元素。

这是怎么回事！！！！！！？？？这是新的Blaze templating engine Meteor uses 中的错误吗？

更新

我刚刚在我的fill-height 中尝试了height: inherit，但它也不起作用。我真的走投无路了。这看起来应该很简单。

更新

好的，我要进行一些小改动。有了这个less：

.fill-height {
    min-height: 100%;
    height:auto !important; 
    height: 100%; 
}
.body-film {
    .fill-height();
}
.block-film {
    .fill-height();
}

container-fluid 现在是全高的，但使用完全相同的 mixin 的 body-film 和 block-film 不是！！

这是一个截图，显示了row.body-film，它应该是全高的，因为它上面的container-fluid是（相信我的话，container-fluid现在被拉伸到填满身体）。

注意，手动将fill-height 添加到行的html 声明中并没有改变任何东西，它的行为与通过body-film mixin 接收它的行为相同。

为什么有些元素根本不响应所有这些min-height 要求？

P.S.，我使用的是 Chrome，但它是在 ubuntu 机器上，所以我不能确定是否有任何不一致。

回答

以下最终工作：

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    height: 100%;
    overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
    background-color: fadeout(@studio-bar-color, @studio-body-film-trans-delta);
}
.block-film {
    min-height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
    background-color: fadeout(@studio-bar-color, @studio-block-film-trans-delta);   
}

overflow 属性非常关键，这是以前不太了解的东西。为整个身体（需要能够上下移动的东西）赋予scroll 值是答案，同时为最里面的元素 (block-film) 赋予min-height 以确保它自身伸展并随后是所有父元素。

Answer 1

我知道你说过你已经尝试了每一种组合，但是呢：

html, body {
    height: 100%;
}
.fill-height {
    min-height: 100%;
    height:auto !important; /* cross-browser */
    height: 100%; /* cross-browser */
}

在 body 上设置 min-height: 100% 的问题是，子 div 上的 height: 100% 实际上没有适当的父级高度可供参考，因此不起作用。

编辑：

此逻辑适用于所有子 div。因此，在您的情况下， body-film div 是 container-fluid 的子级。因为 container-fluid 现在有一个 100% 的 min-height，而不是定义的 height（它设置为自动），所以当你给 body-film 一个高度百分比时，它没有参考高度。 MDN - CSS height 和 MDN - CSS min-height 值得一读。

换句话说，如果你希望 div 的高度或最小高度为 100%，那么它的所有父元素都需要定义为 100% 的高度，一直到 html 标记。

你可能需要做的是这样的事情：

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    min-height: 100%;
    overflow-y: scroll;
}

这可能不是最终的答案，因为它取决于您到底想要什么，但希望这能让您走上正确的道路。

Answer 2

虽然这与 html 大小问题没有直接关系，但我最近发现了一种非常更简单的方法来实现这种“透明胶片”，使用box-shadow。

This article breaks it down pretty well.他还提供了其他方法，但坦率地说，这似乎是最简单的。

<div class="example"></div>

.example {
    position:relative;
    width: 300px;
    height: 313px;
    box-shadow: 0px 313px rgba(255, 0, 92, 0.6) inset;
    background: url(/img.png);
}