我想创建一个带有页眉、内容和页脚的基本网页，页眉和页脚各占页面（视口）的 30%，内容占 60%，但我不确定该怎么做。我尝试了以下代码：CSS布局具有固定的顶部和底部，可变高度中间，但我无法使用百分比高度。
我已经定义了html和body的高度。
这是
你想要的。检查一下并尝试一下
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.maindiv{
width: 100%;
height: 768px;
}
div.header{
width: 100%;
height: 10%;
background-color: orange;
}
div.content{
width: 100%;
height: 60%;
background-color: black;
}
div.footer{
width: 100%;
height: 30%;
background-color: orange;
}
</style>
<body>
<div class="maindiv">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</body>
</html>