Page 1 of 1

How to make Header(100px), Content (100%) and Footer(30px)?

Posted: Sun Jan 10, 2010 6:52 pm
by simplyi
Hi! On my page I have Header, Content and Footer.

Header should be exactly 100px. Footer should be 30px. And everything in between header and footer should be the Content. No srolbar should appear in browser window. But I cannot make it so that the footer is at the bottom of the page and Content is span between Header and Footer by 100%.

Please advise me...

<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
}
</style>

<body>
<div style="height:100%; width:100%">
<div style="float:left; width:100%; height:100px; background-color:#CCC"> Header </div>
<div style="float:left; width:100%; height:100%; background-color:#666"> Content </div>
<div style="float:left; width:100%; height:30px; background-color:red"> Footer </div>
</div>
</body>

Thank you.

Re: How to make Header(100px), Content (100%) and Footer(30px)?

Posted: Mon Jan 11, 2010 8:51 am
by marshpixie
Is there any reason you need to put all the css in the html tags? It might be better to set three divs... the header, content and footers... in the css at the top. But working with what you have there, this is ugly but will work (or does in Firefox...}

Code: Select all

<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
background-color:#666;
}
</style>
 
<body>
<div style="height:100%; width:100%">
<div style="float:left; width:100%; height:100px; background-color:#CCC"> Header </div>
<div style="float:left; width:100%; background-color:#666; overflow: hidden;"> Content </div>
<div style="float:left; width:100%; height:30px; background-color:red; position:absolute; bottom:0;"> Footer </div>
</div>
</body>
overflow: hidden means you won't get scroll bars, like you requested.
I had to make the body the same colour as the content else you'd get a strip (delete it and see what happens}
I took out the height of the content, and fixed the footer to the bottom.
This is one way of doing it but it's really just fudging a bit with what you've got.

Re: How to make Header(100px), Content (100%) and Footer(30px)?

Posted: Mon Jan 11, 2010 11:02 am
by pickle
Google footerStickAlt

Re: How to make Header(100px), Content (100%) and Footer(30px)?

Posted: Mon Jan 11, 2010 11:54 am
by marshpixie
OOh: I know I wasn't the original poster of the question but that was useful, thank you!

Re: How to make Header(100px), Content (100%) and Footer(30px)?

Posted: Mon Jan 11, 2010 12:17 pm
by simplyi
Thank you very much for your reply.

I am very sory for this confusion. May be I am not being very clear in my examples. But what I need is to NOT TO achieve the effect of sticky footer. But how to actualy stretch the <div> inside another div by xxx%. In the example below I have Content 1 and Content 2 each of which I want to be 50% of size. Content 1 and Content 2 are in between Header and Footer. So header and Footer and Fixed size. Header is 100px and Footer and 30px. But the Content in Between I want to be able to control by making it 100% or by making Content 1 (50%) and Content 2 (50%).

Both Content 1 and Content 2 now have diffent background colors. And it is clearly seen that they are not of 50%... Please advise me how do I stretch them?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<head>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
background-color:#666;
}
.myHeader
{
float:left;
width:100%;
min-height:100px;
background-color:#CCC;
}
.content_part_1
{
float:left;
width:100%;
min-height:50%;
background-color:#666;
overflow: hidden;
}

.content_part_1
{
float:left;
width:100%;
min-height:50%;
background-color:#339;
overflow: hidden;
}
.myFooter
{
float:left;
width:100%;
height:30px;
background-color:red;
position:absolute;
bottom:0;
}
</style>


</head>

<body>
<div style="min-height:100%; width:100%; background-color:#0F3">
<div class='myHeader'> Header </div>
<div class="content_part_1"> Content 1</div>
<div class="content_part_2"> Content 2</div>
<div class="myFooter"> Footer </div>
</div>
</body>
</html>

Re: How to make Header(100px), Content (100%) and Footer(30px)?

Posted: Mon Jan 11, 2010 9:18 pm
by daedalus__
there are a lot of articles detailing how to do this scattered across the web.

Code: Select all

 
body,html
{
    height: 100%;
}
 
header
{
    height: 10%;
}
 
footer
{
   height: 5%;
}
 
article
{
    height: 85%;
    overflow: none;
}
 
play around with that and use google.

and stop using floats.

floating an element gives it the same attributes as an absolutely position element breaking it out of the parent.

if you are going that route then use absolute positioning to position the header and footer then adjust the margins on the content to compensate.

Re: How to make Header(100px), Content (100%) and Footer(30px)?

Posted: Mon Jan 11, 2010 10:17 pm
by simplyi
daedalus__, Thank you for your reply!

I need header and footer to be in 'px' not in '%' and inner divs should stretch(height:100%) in between header and footer to occupy whatever is left.

Yes, I am googling for a solution but until now was not able to find anything.

What I am starting to understand is that the div can have height 100% only when it is inside it’s parent div and that div is also 100%. And it works only with the first level blocks like body. So if body is 100% then the first level div can be 100% in height. Nested blocks then cannot be stretched by 100% in height …

Just like my example above. Nested divs do not stretch properly within Header and Footer blocks.

If you have a link to working example please share it with me. I admit I am not a professional in CSS and coding and that is why and I am hear and am asking for an advise.

Thank you!