Question

我想创建一个包含页眉，内容和页脚的基本网页，页眉和页脚各自占据页面的30％（视口），内容占60％，但我不知道该如何去关于它。我尝试了这段代码：CSS layout with fixed top and bottom, variable height middle但我无法使用百分比高度。

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

Answer 1

这就是你想要的。检查并试一试

＆＃13;

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

＆＃13;

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

1 个答案: