Menu
I know there are a lot of questions about a css 100% height problem. However I've tried to follow the instructions there and still the height isn't 100%, so I thought I'd ask the question again.
The site where you can see the problem is:
www.exendo.be
some css styles:
html {
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
}
body {
background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
wrapper {
height: auto !important;
min-height: 100%;
position: relative;
}
footer-container {
background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
height:146px;
}
As you can see on the site, the footer is too high on the page. If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't. The problem both occurs on Firefox and IE.
If anybody could help that would be great!
528
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Conclusion. With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).
In fact, height 100% corresponds to height of the screen minus the address bar at top of screen, while 100vh corresponds to height of the screen without the address bar.
A number of people suggested position:absolute; bottom:0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
106
I think this article can help you.
According to this article:
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
I hope that helps you.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
