Height not 100% on Container Fluid even though html and body are
I have the following layout (I\'m using Meteor):
-
Although this doesn't directly relate to the html sizing problems, I recently discovered a much easier way to achieve this sort of "transparent film" thing, using 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); }讨论(0) -
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.
讨论(0)
加载中...
- 热议问题