CODEWITHSUNDEEP
htmlcss
user2208349
user2208349

Reputation: 7709

css height property is not working in a very simple example:

This is my html page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="Styles/style.css" />
</head>
<body>
    <div class="header"></div>
    <div class="slideBar"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
</html>

This is my css 

.header {
    width:100%;
    height:20%;
    background-color:red;
}
.footer {
    width:100%;
    height:20%;
    background-color:green;
}
.slideBar {
    width:20%;
    height:60%;
    float:right;
    background-color:blue;
}
.content {
    width:80%;
    height:60%;
    background-color:yellow;
}

when I run my page. I got empty white page.

Then I added a one word to each div like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="Styles/style.css" />
</head>
<body>
    <div class="header">HEADER</div>
    <div class="slideBar">SLIDEBAR</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</body>
</html>

The result is this: enter image description here

That means the height property is not working.

I don't want to use pixel in my height property. I need to use percentage

Upvotes: 0

Views: 43

Answers (1)

aisin
aisin

Reputation: 1097

Demo: http://jsbin.com/roxal/1

when you use percentage for height, then the value of height depend on its parent's height value, so you should set html and body's height value.

<!DOCTYPE html>
<html>
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="Styles/style.css" />
    <style>
    html, body {height: 100%;}
    .header {
        width:100%;
        height:20%;
        background-color:red;
    }
    .footer {
        width:100%;
        height:20%;
        background-color:green;
    }
    .slideBar {
        width:20%;
        height:60%;
        float:right;
        background-color:blue;
    }
    .content {
        width:80%;
        height:60%;
        background-color:yellow;
    }

    </style>
</head>
<body>
    <div class="header">HEADER</div>
    <div class="slideBar">SLIDEBAR</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</body>
</html>

Upvotes: 2

Related Questions