<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元素都符合预期.他们以任何缩放级别或大小填满他们的区域.
然而,添加了填充高度类的容器流体没有做这个工作.它只是包装它的内容,而不是填充到底部.这是一个问题,因为它负责在页面中添加身体电影和片段,这只是半透明的背景,给整个事物带来一些色彩的统一.
这里有一些屏幕截图,所有的页面都缩小了,所以内容没有填满高度：
现在这里是选择了body元素.正如你可以看到,它填满了父母很好.
但容器液不是.
使用填充高度,我尝试了高度和最小高度,它们看起来完全相同.
您的帮助不胜感激！
更新
我一直在尝试这三个元素的最小高度和高度的所有可能的组合,没有任何正常的作用.
所有三幅作品的高度,当内容对于视口来说太小时,但是当内容对于视口太大时,内容块就会完全从外部溢出,这意味着电影太短.
所有这三个人的最小高度似乎都是最符合逻辑的方式,但是当内容太小时,它就会中断.在这种情况下,body元素不会扩展以填充其html父项.
这是怎么回事！！！！？？？？？这是新的Blaze templating engine Meteor uses中的错误吗？
更新
我刚刚尝试了高度：继承我的填充高度,它也没有工作.我真的在绳索的尽头.这似乎应该这么简单.
更新
好的,我有一点点变化.有了这个少：
.fill-height {
min-height: 100%;
height:auto !important;
height: 100%;
}
.body-film {
.fill-height();
}
.block-film {
.fill-height();
}
容器液体现在是高度,但不是使用完全相同的混合物的身体膜和块状物！
这是一个屏幕截图,显示row.body-film,它应该是全高度,因为它上面的容器流体(我的话,容器流体现在被拉伸填补身体).
注意,手动将填充高度添加到行的html声明中并没有改变任何东西,它的行为是相同的,就像它只是通过body-film mixin接收一样.
为什么有些因素根本无法满足所有这些最低要求？
我使用的是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属性是非常关键的,这是以前不太了解的.给整个身体提供一个滚动值(需要上下移动的东西)是答案,以及给最内层的元素(块电影)最小高度,以确保其伸展自身,随后全部的父元素.
解决方法
html,body {
height: 100%;
}
.fill-height {
min-height: 100%;
height:auto !important; /* cross-browser */
height: 100%; /* cross-browser */
}
设置最小高度：100％的身体的问题是,该高度：小孩div上的100％实际上没有适当的父高度来引用,并且不起作用.
编辑：
这个逻辑适用于所有的子div.所以在你的情况下,身体电影div是容器液体的孩子.因为容器流体现在具有100％的最小高度,而不是一个定义的高度(它被设置为自动),当您给body-film设置高度百分比时,它没有高度来引用.值得一读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;
}
这可能不是确定的答案,因为它取决于你想要什么,但希望这将使你在正确的轨道上.
