如何强制DIV具有指定百分比的高度？

我有这样的HTML：（我希望头部是屏幕高度的15％）。整个DOM树直到.header div都用高度百分比定义。但是标题div高度只包含了小于屏幕15％的内容。如何强制DIV具有指定百分比的高度？

<!DOCTYPE HTML> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/index.css">   
    <title> </title> 

    </head> 
    <body onload="pageLoad();"> 
    <div class="header"> 
    </div> 

    <div id="TempDiv" style="visibility:hidden"></div> 
    <div class="page-body"> </div> 
    <div class="footer"> </div> 
    <script> $(".footer").load("footer.html");</script> 
    </body> 
</html>

的CSS是：

html { 
    -webkit-touch-callout: none; 
    -webkit-text-size-adjust: none; 
    -webkit-user-select: none; 
    background-color:black; 
    background-image:url('../res/bg.png'); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
    font-size:12px; 
    width:100%; 
    height:100%; 
} 

.body { 
    width:100%; 
    height:100%; 
} 

.header { 
    /*position: absolute; - this change the height as desired but other DIVs get up to undesired position */ 
    margin-top:3%; 
    height:15%; 
} 

.page-body { 
    margin-top:3%; 
    /*min-height:40%;*/ 
    /*border: solid thick white;*/ 
} 

.about , .gallery, .events , .contact 
{ 
    height:100%; 
    width:100%; 
    /*border: solid thick green;*/ 
    vertical-align:middle; 
} 

.footer { 
    /*border: solid thick white;*/ 
    width:100%; 
    height:auto; 
    position: fixed; 
    bottom:4%; 
    text-align:center; 
    }

来源

2013-08-19 Bush

你有没有网页的真实版本？因为该代码应该可以正常工作。 – Shomz

不，我不..你在你的机器上测试过它吗？ – Bush

我在jsfiddle上测试了它，只要你确定html和body元素的高度都是100％（像你一样），它就可以正常工作。 – Shomz

的问题是，你拼错了对身体的CSS。你现在正在设置一个不存在的body类的css。

/* Below was the problem */ 
body { 
    width:100%; 
    height:100%; 
}

来源

2013-08-19 21:05:51 Sumurai8

我的代码工作，当我把HTML至100％，并把重要的头！;

html 
{ 
    width:100%; 
    height:100%; 
} 

body 
{ 
    width:100%; 
    height:100%; 
} 

.header 
{ 
    15% !important; 
}

来源

2016-09-28 08:12:04 bdalina

如何强制DIV具有指定百分比的高度？

回答

相关问题