Height not 100% on Container Fluid even though html and body are
I have the following layout (I\'m using Meteor):
-
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 thatheight: 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-heightof 100%, and not a definedheight(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.
加载中...
- 热议问题