css height属性不是一个非常简单的例子：
[英]css height property is not working in a very simple example:
问题描述
这是我的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>
结果是这样的：
这意味着height属性不起作用。
我不想在我的身高属性中使用像素。 我需要使用百分比
1 个解决方案
解决方案1
2 已采纳 2014-04-18 13:39:22
演示： 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>
简单的100％CSS高度示例不起作用，有人可以帮忙吗
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.