三个 div 以百分比高度跨越整个页面（全长和全宽）

【问题标题】：Three divs to span across the entire page(full length and width) with percentage height三个 div 以百分比高度跨越整个页面（全长和全宽）
【发布时间】：2016-05-03 21:11:46
【问题描述】：

我想创建一个带有页眉、内容和页脚的基本网页，页眉和页脚各占页面（视口）的 30% 和内容的 60%，但我不知道该怎么做.我试过这段代码：CSS layout with fixed top and bottom, variable height middle 但我不能使用百分比高度。

我已经定义了html和body的高度。

【问题讨论】：

你的代码在哪里？以及显示什么？

标签： html css

【解决方案1】：

这是你想要的吗？检查并尝试一下

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

【讨论】：

是的，就是这样。谢谢！