即使html和body都是容器流体的高度不是100％

我有以下布局(我正在使用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备份：@H_502_5@

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

html和body元素都符合预期.他们以任何缩放级别或大小填满他们的区域.@H_502_5@

然而,添加了填充高度类的容器流体没有做这个工作.它只是包装它的内容,而不是填充到底部.这是一个问题,因为它负责在页面中添加身体电影和片段,这只是半透明的背景,给整个事物带来一些色彩的统一.@H_502_5@

这里有一些屏幕截图,所有的页面都缩小了,所以内容没有填满高度：@H_502_5@

现在这里是选择了body元素.正如你可以看到,它填满了父母很好.@H_502_5@

但容器液不是.@H_502_5@

使用填充高度,我尝试了高度和最小高度,它们看起来完全相同.@H_502_5@

您的帮助不胜感激！@H_502_5@

更新@H_502_5@

我一直在尝试这三个元素的最小高度和高度的所有可能的组合,没有任何正常的作用.@H_502_5@

所有三幅作品的高度,当内容对于视口来说太小时,但是当内容对于视口太大时,内容块就会完全从外部溢出,这意味着电影太短.@H_502_5@

所有这三个人的最小高度似乎都是最符合逻辑的方式,但是当内容太小时,它就会中断.在这种情况下,body元素不会扩展以填充其html父项.@H_502_5@

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

更新@H_502_5@

我刚刚尝试了高度：继承我的填充高度,它也没有工作.我真的在绳索的尽头.这似乎应该这么简单.@H_502_5@

更新@H_502_5@

好的,我有一点点变化.有了这个少：@H_502_5@

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

容器液体现在是高度,但不是使用完全相同的混合物的身体膜和块状物！@H_502_5@

这是一个屏幕截图,显示row.body-film,它应该是全高度,因为它上面的容器流体(我的话,容器流体现在被拉伸填补身体).@H_502_5@

注意,手动将填充高度添加到行的html声明中并没有改变任何东西,它的行为是相同的,就像它只是通过body-film mixin接收一样.@H_502_5@

为什么有些因素根本无法满足所有这些最低要求？@H_502_5@

我使用的是Chrome,但它是在ubuntu机器上,所以我无法确定是否有任何不一致.@H_502_5@

回答@H_502_5@

以下最后工作：@H_502_5@

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属性是非常关键的,这是以前不太了解的.给整个身体提供一个滚动值(需要上下移动的东西)是答案,以及给最内层的元素(块电影)最小高度,以确保其伸展自身,随后全部的父元素.@H_502_5@

解决方法

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

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

设置最小高度：100％的身体的问题是,该高度：小孩div上的100％实际上没有适当的父高度来引用,并且不起作用.@H_502_5@

编辑：@H_502_5@

这个逻辑适用于所有的子div.所以在你的情况下,身体电影div是容器液体的孩子.因为容器流体现在具有100％的最小高度,而不是一个定义的高度(它被设置为自动),当您给body-film设置高度百分比时,它没有高度来引用.值得一读MDN – CSS height和MDN – CSS min-height.@H_502_5@

换句话说,如果你想要一个高度或最小高度为100％的div,那么所有的父元素都需要有一个定义的100％的高度,一直到html标签.@H_502_5@

你可能需要做的是这样的：@H_502_5@

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;
}

这可能不是确定的答案,因为它取决于你想要什么,但希望这将使你在正确的轨道上.@H_502_5@

即使html和body都是容器流体的高度不是100％

解决方法

猜你在找的HTML相关文章