Height not 100% on Container Fluid even though html and body are
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.
blaineh
Updated on July 05, 2020Comments
-
blaineh almost 4 years
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
andbody
elements are both behaving as expected. They fill their areas at any zoom level or size.However, the
container-fluid
with thefill-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 addingbody-film
andblock-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 bothheight
andmin-height
, and they look exactly the same.Your help is appreciated!
Update
I've been trying every possible combination of
min-height
andheight
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 thebody
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, thebody
element doesn't stretch to fill itshtml
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 myfill-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
andblock-film
which are using the exact same mixin!!Here is a screenshot, showing the
row.body-film
, which should be full height, since thecontainer-fluid
above it is (take my word for it, thecontainer-fluid
is now stretched to fill the body).Note, manually adding the
fill-height
to thehtml
declaration of the row didn't change anything, it behaves identically as if it were simply receiving that through thebody-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 ascroll
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
) themin-height
to ensure it stretched itself and subsequently all of the parent elements. -
blaineh about 10 yearsNeither the first solution nor the
!important
one worked :/ Isn't this strange??? -
jackfrankland about 10 yearsWhat actually happens when you try this?
-
jackfrankland about 10 yearsI'm not sure the header and footer should be in the container. Try taking them out completely and see what happens. It may also be worth posting up the HTML copied from chrome's dev panel
-
blaineh about 10 yearsBoth of the solutions were behaved identically to what I posted.
-
blaineh about 10 yearsI'll post the html asap!
-
blaineh about 10 yearsCopying html from the dev panel is always annoying, so I just gave you a screenshot zoomed in far enough to see what I'm seeing. The divs that are refusing to stretch don't have any extraneous parents above them.
-
blaineh about 10 yearsAlso, putting the header and footer in their own
container-fluid
outside of the one I'm trying to stretch made no difference. -
jackfrankland about 10 yearsI tiny mistake in your HTML can throw everything off, so it's worth removing the header and footer completely until you've got what you want working, then you can add to it. Anyway, I've made an edit which will hopefully help.
-
Dragutescu Alexandru over 7 yearsThe wrapper bellow the body that envelops the content and stretches html and body to viewport height . Well played this worked like a charm