Need help in CSS body height (100%) Height

Question

0.00/5 (No votes)

See more:

I'm making a website but i got a little bit problem i tried a lot but won't found it to work..! hope you guys can do it..!
Question :
my site having a background color, 2 div and 1 table, and i want to make my site body to be in center and also it should be 100% in height, like yahoo answer's body is.
i had made external style sheet, i'm using CSS (Not css3)
Hope you guys can solve my problem thanks..!

Posted 9-Nov-12 3:04am

Ashwin Pathak

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Eyakem · Answer 1 · 2012-11-09T03:28:00

Here is quick sample:

XML

<!-- html -->
<html>
    <head></head>
    <body>
        <div class="main">
            <div class="heading">
                Heading here
            </div>
            <div class="nav">
                Navigation
            </div>
            <div class="content">
                content
            </div>
                <div class="footer">Footer here</div>
            <div>

    </body>
</html>

/*CSS*/
html, body{height:100%; width:100%}
.main{width:500px;height:100%;  margin:0 auto;border-right:1px solid #ddd; }
.heading{clear:both; height:6%;text-align:center;background-color:#eee}
.nav{height:90%;width:150px; float:left; background-color: #ddd;padding-left:5px;}
.footer{height:4%; background-color:#eee;clear:both;text-align:center;}

View it on jsfiddle jsfiddle full screen[^]

jsfiddle Source view [^]

Here is a simple version of the solution above with description:

1. to make sure that your website stay full width and height of the browser set the html and body tags to have 100% on both height and width. For visibility I have the website to look silver background

2. To make your main content stay always in the middle, set its width and give it a 'margin: 0 auto'. What this means is that your main content will have top and bottom 0 while its left and right adjust automatically with the browser width and stay centred. ('margin: 0 auto' is short for 'margin: 0 auto auto 0')
Again for visibility I have given the content area a white background

XML

<!-- html -->
<html>
    <head>
    </head>
    <body>
        <div class="main">
            this is your main content, always centered
        </div>        
    </body>
</html>

/*css*/
html,body{
    height:100%;
    width:100%;
    background-color:silver
}
.main{
    height:100%;
    width:400px;
    margin:0 auto;
    background-color:white;
    padding:5px;
}

Here is the preview for this demo onjsfiddle[^]