容器液体的高度不是100％，即使html和身体也是如此

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元素的行为都符合预期。它们以任何缩放级别或大小填充它们的区域。

但是，添加了container-fluid类的fill-height没有完成这项工作。它只是包装它的内容，而不是填充到底部。这是一个问题，因为它负责向页面添加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中的错误吗？

更新

我刚刚在height: inherit中尝试了fill-height，但它也没有用。我真的走到了尽头。这看起来应该很简单。

更新

好吧，我发生了一些变化。使用此less：

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

容器流体现在是全高，但body-film和block-film使用完全相同的混合物!!

这是一个屏幕截图，显示row.body-film，其中应为全高，因为它上面的container-fluid（请接受我的话，{{1}现在拉伸以填充身体。）

注意，手动将container-fluid添加到行的fill-height声明中并没有改变任何内容，它的行为完全相同，就好像只是通过html mixin接收它一样。 / p>

为什么有些元素根本不会对所有这些body-film要求做出回应？

P.S。，我正在使用Chrome，但是是在ubuntu机器上，所以我无法确定是否存在任何不一致。

答案

以下结束了工作：

min-height

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确保它自己伸展，然后是所有的父元素。

Answer 1

我知道你说你已经尝试过各种组合，但是：

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

在正文上设置min-height: 100%的问题是，子div上的height: 100%实际上没有正确的父级引用，并且无效。

编辑：

此逻辑适用于所有子div。所以在你的情况下，身体电影div是容器流体的孩子。因为容器流体现在具有100％的min-height，而不是定义的height（它被设置为自动），当你给身体胶片赋予高度百分比时，它没有高度参考。值得阅读MDN - CSS height和MDN - CSS min-height。

换句话说，如果你希望有一个高度或最小高度为100％的div，那么它的所有父元素都需要有一个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);
}