如何強制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具有指定百分比的高度？

回答

相關問題