css height属性不是一个非常简单的例子：

Question

This is my html page 这是我的html页面

<!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 这是我的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: 然后我给每个div添加了一个单词，如下所示：

<!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: 结果是这样的： 在此输入图像描述

That means the height property is not working. 这意味着height属性不起作用。

I don't want to use pixel in my height property. 我不想在我的身高属性中使用像素。 I need to use percentage 我需要使用百分比

Answer 1

Demo: http://jsbin.com/roxal/1 演示： 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. 当您使用百分比作为高度时，高度的值取决于其父级的高度值，因此您应该设置html和body的高度值。

<!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>

css height属性不是一个非常简单的例子：

问题描述

I don't want to use pixel in my height property. 我不想在我的身高属性中使用像素。 I need to use percentage 我需要使用百分比

1 个解决方案

解决方案1
2 已采纳 2014-04-18 13:39:22

css height属性不是一个非常简单的例子：

问题描述

I don't want to use pixel in my height property. 我不想在我的身高属性中使用像素。 I need to use percentage 我需要使用百分比

1 个解决方案

解决方案1 2 已采纳 2014-04-18 13:39:22

解决方案1
2 已采纳 2014-04-18 13:39:22