Question

这是我的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>

这是我的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;
}

当我运行我的页面时。我得到空白页。

然后我给每个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>

结果如下： enter image description here

这意味着height属性不起作用。

我不想在我的身高属性中使用像素。我需要使用百分比

Answer 1

演示：http://jsbin.com/roxal/1

当您使用百分比作为高度时，高度值取决于其父级的高度值，因此您应该设置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属性不是一个非常简单的例子：

我不想在我的身高属性中使用像素。我需要使用百分比

1 个答案: