即使html和body是高度不是100％在容器流体 [英] Height not 100% on Container Fluid even though html and body are

问题描述

我有以下布局（我使用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 =newsfeedclass =col-sm-offset-7 col-sm-5 block-film> 
 {{#each stories}} 
< div class =story> ...< / div> 
 {{/ each}} 
< / div> 
< / div> 
 {{/ headerFooter}} 
< / template> 
  

和此（相关） css up：

  html {
 height：100％; 
} 
 body {
 min-height：100％
} 
 .fill-height {
 height：100％; 
} 
  

html body 元素的行为都符合预期。

但是， container-fluid 与 fill-height 添加的类不是做这个工作。它只是包装它的内容，而不是填充到底部。这是一个问题，因为它负责在页面中添加 body-film 和 block-film 半透明背景给整个东西一些颜色的统一。

这里有一些截图，所有与页面缩小，所以内容不填满高度： / p>

现在这里选择 body 元素。

但是容器流体没有。

使用 fill-height 我已经尝试过 height 和

您的帮助非常感谢！

更新

我一直在尝试所有可能的组合 min-height 和 height

对所有三个作品当内容对于视口来说太小时，但是当内容对于视口来说太大时，内容块完全从主体溢出，这意味着电影也太

min-height 对我来说似乎是最合理的方式，但是当内容太小时它会中断。在这种情况下， body 元素不会延伸到填充其 html 父级。

发生了什么!!!!这是新的和MDN - CSS最小高度。

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

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

  html，body { 
 height：100％; 
} 
 .container-fluid {
 height：100％; 
 overflow-y：hidden; / *不显示超过我身高的内容* / 
} 
 .body-film {
 min-height：100％; 
 overflow-y：scroll; 
} 
  

这可能不是最终的答案，因为它取决于你想要什么，但希望这会让你在正确的轨道上。

I have the following layout (I'm using 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) css backing it up:

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

The html and body elements are both behaving as expected. They fill their areas at any zoom level or size.

However, the container-fluid with the fill-height class 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-film and block-film to the page, which are just semi-transparent backgrounds to give the whole thing some color unity.

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

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

But the container-fluid doesn't.

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

Your help is appreciated!

Update

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

height on 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 body entirely, which means the films are too short for it.

min-height on 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 body element doesn't stretch to fill its html parent.

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

Update

I've just tried height: inherit in 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.

Update

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

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

The container-fluid is now full height, but not the body-film and block-film which are using the exact same mixin!!

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

Note, manually adding the fill-height to the html declaration of the row didn't change anything, it behaves identically as if it were simply receiving that through the body-film mixin.

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

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

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 overflow attribute was extremely key, and it's something didn't previously know much about. Giving a scroll value 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-height to ensure it stretched itself and subsequently all of the parent elements.

解决方案

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.

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-height of 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 height and 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.

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.

这篇关于即使html和body是高度不是100％在容器流体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！