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

我想创建一个带页眉，内容和页脚的基本网页，页眉和页脚各占页面的30％（视口）和内容60％，但我不知道如何去做。我试过这个代码：CSS layout with fixed top and bottom, variable height middle但我无法使用百分比高度。三个div跨越整个页面（全长和宽度），百分比高度

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

来源

2016-01-27 m00t13

哪里是你的代码？什么显示？ –

这是你want.check这个什么尝试

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    \t <title></title> 
 
    </head> 
 
    
 
    <style type="text/css"> 
 
     
 
     body{ 
 
     \t margin: 0; 
 
     \t padding: 0; 
 
     } 
 
     
 
    \t div.maindiv{ 
 
    \t \t width: 100%; 
 
    \t \t height: 768px; 
 
    \t } 
 
    \t div.header{ 
 
    \t \t width: 100%; 
 
    \t \t height: 10%; 
 
    \t \t background-color: orange; 
 
    \t } 
 
    
 
    \t div.content{ 
 
    \t \t width: 100%; 
 
    \t \t height: 60%; 
 
    \t \t background-color: black; 
 
    \t } 
 
     div.footer{ 
 
     \t width: 100%; 
 
     \t height: 30%; 
 
     \t background-color: orange; 
 
     } 
 
    
 
    </style> 
 
    
 
    <body> 
 
    <div class="maindiv"> 
 
     \t <div class="header">header</div> 
 
     \t <div class="content">content</div> 
 
     \t <div class="footer">footer</div> 
 
    
 
    </div> 
 
    
 
    </body> 
 
    </html>

来源

2016-01-27 04:57:16

是的，就是这样。谢谢！ – m00t13

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

回答

相关问题