What's the best way to make an element of 100% minimum height across a wide range of browsers ? In particular if you have a layout with a header and footer of fixed height how do you make the middle content part fill 100% of the space in between with the footer fixed to the bottom ?
+10
A:
I am using the following one: CSS Layout - 100 % height
Works fine for me...
ollifant
2008-08-24 18:12:21
On that example tried in IE7 to increase font size (Ctrl + "+") and that ruined sticky footer :(
Vitaly
2010-03-03 20:23:01
Thank you so much for the link! I have been looking everywhere for this!
samoz
2010-07-06 02:36:08
A:
@kleolb02 Good but the content div isn't really 100% so with some designs this won't work like if the header is transparent.
Chris Porter
2008-08-24 18:41:18
+4
A:
kleolb02's answer looks pretty good. another way would be a combination of the sticky footer and the min-height hack
henrikpp
2008-08-27 18:29:38
+2
A:
A pure CSS soultion ( #content { min-height: 100%; } ) will work in a lot of cases, but not in all of them - especially IE6 and 7. Unfortunately, you will need to resort to a javascript solution in order to get desired behavior - this can be done by calculating the desired height for your content div and setting it as a CSS property in a function:
function resizeContent() {
var contentDiv = document.getElementById('content');
var headerDiv = document.getElementById('header');
// This may need to be done differently on IE than FF, but you get the idea.
var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
contentDiv.style.height =
Math.max(viewportHeight, contentDiv.clientHeight) + 'px':
}
You can then set this function as a handler for onLoad and onResize events:
<body onload="resizeContent()" onResize="resizeContent()">
. . .
</body>
levik
2008-09-03 23:41:08
+1
A:
@levik there is absolutely no reason javascript has to come into play for this scenario. the main thing to keep in mind is that the body of the document needs to have a height of 100%. there are some great examples on how to achieve this here:
cowgod
2008-09-18 06:58:46
-1 - your link points to a page containing hundreds of links. none of which, after a few minutes of scanning, seem germain to this question. Not much value as it is. Might as well have said 'google it'
Sky Sanders
2010-03-08 19:58:51
+1
A:
You Can use min-height hack, which will be working in all the browsers...
Webdevelopertut
2009-06-26 04:13:23
A:
I have been trawling the web trying to find an answer to my css nightmare question.
The main problem seems to be getting a min-height:580px and a height:100%
The thing I need to achieve is:
- Site to have a min height of 580px including footer so total height before scroll bars appear is 580px.
- Also, a min width is needed of 930px including right and left margin of 15px each side.
- left menu of 216px wide and 100% high minus the footer height of 30px.
- Main part of the screen should fill all the space available. Unless the screen height is less than 580px or width less than 930px. In this case you get scroll bars.
- Compatiblity ie6,7,8, Firefox and Safari.
Can it be done with no Javascript? HELP!
Dave
2009-11-19 21:16:08
Umm.. Dave... a box titled 'Your Answer' is not typically the best place to enter a question. Look to the top of the page for a link that says 'Ask A Question'. I think you will have more success.
Sky Sanders
2010-03-08 19:54:47
A:
You can try this: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ That's 100% height and horizontal center.
Loaden
2010-01-07 07:49:03
A:
Try this:
body{ height: 100%;}
#content{
min-heigh:500px;
height: 100%
}
#footer{
height:100px;
clear:both; !important
}
The div element bellow the content div must have clear:both.
MilanBSD
2010-04-21 16:09:51