Container Fluid的高度不是100%，即使html和body
我有以下布局(我使用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现在是全高的，但body-film和block-film不是，它们使用完全相同的混合！！
这是一个屏幕截图，显示了row.body-film，哪个应该是全高的，因为它上面的container-fluid是全高的(请相信我的话，container-fluid现在被拉伸以填充正文)。
请注意，手动将fill-height添加到行的html声明中不会更改任何内容，它的行为与通过body-film混合接收相同。
为什么有些元素根本不响应所有这些min-height请求？
另外，我使用的是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，以确保它可以伸展自身以及随后的所有父元素。
回答 2
Stack Overflow用户
发布于 2014-04-18 03:24:28
我知道你说过你试过所有的组合，但是：
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是container-fluid的子类。因为container-fluid现在的高度为100%，而不是定义的高度( height设置为auto)，所以当您为身体膜指定高度百分比时，它没有高度可供参考。读一读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;
}这可能不是最终的答案，因为它取决于你到底想要什么，但希望这能让你走上正确的道路。
Stack Overflow用户
发布于 2016-07-05 03:33:52
虽然这与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);
}https://stackoverflow.com/questions/23046801
复制相似问题