容器液体的高度不是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其父元素.

这是怎么回事!!!!？？？？？这是Meteor使用的新Blaze模板引擎中的一个错误吗？

更新

我刚尝试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它是上面的(接受我的话,它container-fluid现在被拉伸以填充身体).

注意,手动添加fill-height到html行的声明并没有改变任何东西,它的行为完全相同,就像它只是通过body-filmmixin 接收它一样.

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

PS,我正在使用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 */
}

设置min-height: 100%在主体上的问题是,height: 100%在子div上实际上没有适当的父高度来引用,并且不起作用.

编辑:

此逻辑适用于所有子div.所以在你的情况下,身体电影div是容器流体的孩子.因为容器流体现在具有min-height100%,而不是定义的height(设置为自动),当您给身体胶片赋予高度百分比时,它没有引用的高度.值得阅读MDN - CSS高度和MDN - CSS最小高度.

换句话说,如果您希望高度或最小高度为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;
}

这可能不是明确的答案,因为它取决于你想要什么,但希望这会让你走上正确的轨道.