So how to set height to 100%, like width, so automatically fits to use’s monitor and there is no more than that or less than that.
Header is always on top, footer always on bottom and main section is between! On every screen!
Hi,
I think by doing the following or similar:
#header{height:20%;}
#body{height:60%;}
#footer{height:20%;}
I have header fixed height 100px and width 100%. No footer. So main section is the rest of body. I tried to overflow it with some content and when I did it I got height more than 100%.
Is there any way doing this via JavaScript, first detect user’s body height, and this detected height set as body’s max-height?
I see, I think you are into some trouble with this approach if header has fixed height and I would never recommend fixing it with JS just as a matter of keeping things as clean as possible and not letting down users without JS. Maybe we should ask the question: why do you want to do this? and perhaps we can come out with a better approach.
cheers
Actually by thinking a bit I realized the solution. It is perfectly possible if you do something like:
#header{
position:relative;
height:100px;
width:100%;
}
#body{
position:absolute;
top:100px;
left:0;
right:0;
bottom:0;
}
Hi,
That will only work as long as you have set html and body to height:100% and then include an inner container set with min-height:100% and position:relative and then place the absolute element at the bottom of that inner container. You would then need to preserve the space that the absolute element takes up or content will run over the top.
A better approach is to use the "sticky footer" method as explained in The [URL=“http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc.-Please-read-before-posting!&p=1239966#post1239966”]CSS FAQ (which should be your first stop). You should also read the section on 100% height also as it is not such a simple subject.
The sticky footer method shown above is the most versatile around (since 2003) and works in more browsers than any other method but you must follow the details correctly.
If you get stuck thne just shout 
Hi Paul I think I did that here without doing what you said and I believe it is cross browser, please check if you can:
I got it Paul, thanks a lot!
That should work for what you want but not for what the original OP was enquiring about.
All you have done is placed something at the bottom of the viewport (not the document). If you were to add real content:
e.g.
<div class="body_wrapper">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
You would soon see that the absolute element just scrolls away as the content goes down the page. However for the requirements on your page with no content apart from that image then it should work fine.
Why this is not working?
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>Sticky Footer at Bottom</title>
<style type=“text/css”>
- {
margin:0;
padding:0;
}
html, body {
height:100%;
text-align:center;
}
#outer{
width:100%;
margin-top:-50px;
min-height:100%;
background:blue;
}
header{
width:100%;
height:50px;
background:red;
margin-top:50px;
}
section{
background:yellow;
}
footer{
height:50px;
width:100%;
background:green;
}
</style>
</head>
<body>
<div id="outer"><header>
</header>
<section>
</section></div>
<footer>
</footer>
</body></html>
Because the 50px top margin collapses on to the wrappers margin and cancels it out. Use padding-top on the header and it will work.
It looks as though you are trying to do a sticky footer so please read this first as there are 10 years of refinement gone into this :). All the issues and details are explained in detail so read carefully as most of the other sticky footers you see around don’t work properly in one browsers or another.
If you are using the html5 elements then you must have the shiv for IE and remember to set them all to display:block - even when testing.
Will be there any changes in HTML5 about this question? Any easier way to do this?
What has html5 got to do with it?
It’s just CSS that we are talking about. You use the bricks and then you build your house. You can build a good house or a bad house but its still the same bricks.
CSS provides the tools you need to build what you want but there are of course some CSS3 modules that will help with building these types of things (such as flexible box layout etc) but are not ready for prime time yet.
What has html5 got to do with it?
It’s just CSS that we are talking about. You use the bricks and then you build your house. You can build a good house or a bad house but its still the same bricks.
CSS provides the tools you need to build what you want but there are of course some CSS3 modules that will help with building these types of things (such as flexible box layout etc) but are not ready for prime time yet.
With Microsoft heavily pushing upgrades you could argue display: table; is ready for prime time, if you’re happy with IE6/7 not getting a sticky footer.
<!doctype html>
<html>
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
#wrap {
display: table;
height: 100%;
}
#header, #footer, #content { display: table-row }
#header, #footer {
height: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<p>Sticky</p>
</div>
</div>
</body>
</html>
Yes display:table is getting closer to be of use now. Just waiting for IE7 to die and we’re good to go
This code you gave it to me. The sticky footer. I set everything between header and footer in section (HTML5), and when I go to inspect element in Chrome and then click on section, it says its height decided by content inside, the height is not 100%? Why is that?
Do you know what Im saying?
Chromes inspect element isn’t always right, yaknow. If you took the code given to you here and chrome is saying that, it’s just wrong.
No
I think that you are checking the height property as there is no height set for the wrapper in my code. It’s height is set to the default which is auto which is why it can expand as its height is dictated by its content.
There is a min-height:100% rule but that’s not the same as height.
You know what Im saying because you answered on my question.
Can I do it using jQuery? Or in other programming language?
Code I found
$(window).resize(function(){
var height = $(this).height() - $(“#header”).height() + $(“#footer”).height()
$(‘Content’).height(height);
})
$(window).resize(); //on page load
Is this useful and good to use?
Is this useful and good to use?
No, don’t use javascript for layout. That’s what CSS is for.
Read through the links Paul gave you.