即使 html 和 body 是 Container Fluid 的高度也不是 100%

Height not 100% on Container Fluid even though html and body are

提问by blaineh

I have the following layout (I'm using Meteor):

我有以下布局（我正在使用 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>

and this (relevant) cssbacking it up:

这（相关）css支持它：

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

The htmland bodyelements are both behaving as expected. They fill their areas at any zoom level or size.

在html和body元素都表现为预期的。它们以任何缩放级别或大小填充其区域。

However, the container-fluidwith the fill-heightclass added isn't doing the job. It's only wrapping it's content, and not filling to the bottom. This is a problem because it is responsible for adding body-filmand block-filmto the page, which are just semi-transparent backgrounds to give the whole thing some color unity.

但是，添加container-fluid的fill-height类并没有完成这项工作。它只是包装它的内容，而不是填充到底部。这是一个问题，因为它负责添加body-film和block-film到页面，这只是半透明的背景，使整个事物具有某种颜色统一。

Here are some screenshots, all with the page zoomed out so the content doesn't fill the height:

这是一些屏幕截图，所有页面都缩小了，因此内容不会填满高度：

Now here it is with the bodyelement selected. As you can see it fills the parent just fine.

现在这里是body选择的元素。如您所见，它很好地填充了父级。

But the container-fluiddoesn't.

但是container-fluid没有。

With fill-heightI've tried both heightand min-height, and they look exactly the same.

随着fill-height我都试过height和min-height，他们看起来完全一样。

Your help is appreciated!

感谢您的帮助！

Update

更新

I've been trying every possible combination of min-heightand heighton these three elements, and nothing works properly.

我一直在努力的每一个可能的组合min-height，并height在这三个要素，并没有正常工作。

heighton all three works when the content is too small for the viewport, but when the content is too large for the viewport, the content block overflows out of the bodyentirely, which means the films are too short for it.

height在所有三部作品中，当内容对于视口来说太小，但是当内容对于视口而言太大时，内容块会溢出body整个，这意味着电影对于它来说太短了。

min-heighton all three seems to me to be the most logical way to go, but it breaks when the content is too small. In this case, the bodyelement doesn't stretch to fill its htmlparent.

min-height在我看来，这三种方式都是最合乎逻辑的方式，但是当内容太小时就会中断。在这种情况下，body元素不会拉伸以填充html其父元素。

What's going on!!!!????? Is this a bug in the new Blaze templating engine Meteor uses?

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

Update

更新

I've just tried height: inheritin my fill-height, and it didn't work either. I'm really at the end of my rope. This seems like it should be so simple.

我刚刚height: inherit在我的fill-height. 中尝试过，它也不起作用。我真的快没救了。这似乎应该如此简单。

Update

更新

Alright, I've got a slight change to happen. With this less:

好吧，我有一个小变化要发生。有了这个less：

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

The container-fluidis now full height, but not the body-filmand block-filmwhich are using the exact same mixin!!

该容器流体现在是完全高度，但不是body-film和block-film它使用的是完全相同的混入！

Here is a screenshot, showing the row.body-film, which shouldbe full height, since the container-fluidabove it is (take my word for it, the container-fluidis now stretched to fill the body).

这是一个屏幕截图，显示row.body-film，它应该是全高，因为container-fluid上面是（相信我的话，container-fluid现在被拉伸以填充身体）。

Note, manually adding the fill-heightto the htmldeclaration of the row didn't change anything, it behaves identically as if it were simply receiving that through the body-filmmixin.

请注意，将 手动添加fill-height到html行的声明中并没有改变任何东西，它的行为与它只是通过body-filmmixin接收一样。

Why is it that some elements don't respond at all to all of these min-heightdemands?

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

P.S., I'm using Chrome, but it ison a ubuntu machine, so I can't be sure if there are any inconsistencies.

PS，我使用的是 Chrome，但它是在 ubuntu 机器上，所以我不确定是否有任何不一致之处。

Answer

回答

The following ended up working:

以下最终工作：

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

The overflowattribute was extremely key, and it's something didn't previously know much about. Giving a scrollvalue to the entire body (the thing that needed to be able to move up and down) was the answer, as well as giving the innermost element (block-film) the min-heightto ensure it stretched itself and subsequently all of the parent elements.

该overflow属性是非常关键的，它的东西以前不很了解。给scroll整个身体（需要能够上下移动的东西）一个值就是答案，同时给最里面的元素 ( block-film)min-height以确保它自己伸展，随后伸展所有父元素。

回答by Hymanfrankland

I know you said you've tried every combination, but what about:

我知道你说过你已经尝试了每一种组合，但是呢：

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

The problem with setting min-height: 100%on the body, is that height: 100%on the child div does not actually have a proper parent height to reference, and will not work.

min-height: 100%在身体上设置的问题是，height: 100%在子 div 上实际上没有适当的父高度可供参考，并且不起作用。

EDIT:

编辑：

This logic applies to all child divs. So in your case, the body-film div is a child of container-fluid. Because container-fluid now has a min-heightof 100%, and not a defined height(it is set to auto), when you give a height percentage to body-film, it doesn't have a height to reference. It's worth having a read of MDN - CSS heightand MDN - CSS min-height.

此逻辑适用于所有子 div。因此，在您的情况下，body-film div 是 container-fluid 的子项。因为容器流体现在有一个min-height100%，而不是一个定义的height（它被设置为自动），当你给 body-film 一个高度百分比时，它没有高度可供参考。值得一读MDN-CSS height和MDN-CSS min-height。

In other words, if you wish to have a div with a height or min-height of 100%, then all of its parent elements need to have a defined height of 100%, all the way up to the html tag.

换句话说，如果您希望 div 的高度或最小高度为 100%，那么其所有父元素都需要定义为 100% 的高度，一直到 html 标签。

What you may need to do is something like this:

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

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

This may not be the definitive answer as it depends on what you want exactly, but hopefully this sets you on the right track.

这可能不是确定的答案，因为它取决于您究竟想要什么，但希望这能让您走上正确的道路。

回答by blaineh

Although this doesn't directly relate to the html sizing problems, I recently discovered a mucheasier way to achieve this sort of "transparent film" thing, using box-shadow.

虽然这与 html 大小问题没有直接关系，但我最近发现了一种更简单的方法来实现这种“透明胶片”的东西，使用box-shadow。

This article breaks it down pretty well.He also offers other methods, but frankly this seems like the simplest.

这篇文章很好地分解了它。他还提供了其他方法，但坦率地说，这似乎是最简单的。

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