如何爲HTML中的不同div分配修復百分比高度？

假設我有一個標題div，一個內容div和一個頁腳div。如何爲HTML中的不同div分配修復百分比高度？

<div id="header"> 
    Title 
</div> 
<div id="content" style="background:red"> 
     <p>TEST</p> 
</div> 
<div id="footer"> 
    footer 
</div>

我怎麼能總是設置標題格爲20％，含量爲70％，股利和頁腳爲10％？

感謝

來源

2013-02-10 Kintarō

你說的寬度，但你的元素堆疊。你的意思是身高嗎？ – Axel 2013-02-10 02:09:59

對不起，我的意思是身高。 – 2013-02-10 02:11:31

Working example on JS Bin。

HTML：

<!DOCTYPE html> 
    <body> 
    <div class="container"> 
     <div id="header" style="background:blue"> 
     Title 
     </div> 
     <div id="content" style="background:red"> 
     <p>TEST</p> 
     </div> 
     <div id="footer" style="background:gray"> 
     footer 
     </div> 
    </div> 
    </body> 
</html>

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

html, 
body, 
.container { 
    height: 100%; 
} 

#header { 
    height: 20%; 
} 

#content { 
    height: 70%; 
} 

#footer { 
    height: 10%; 
}

來源

2013-02-10 02:15:31

+1容器div可能是最優雅的方式 – 2013-02-10 02:46:56

你可以用絕對定位做到這一點：

#header { 
    position: absolute; 
    top: 0; 
    height: 20%; 
    left: 0; 
    width: 100%; 
} 

#content { 
    position: absolute; 
    top: 20%; 
    height: 70%; 
    left: 0; 
    width: 100%; 
} 

#footer { 
    position: absolute; 
    top: 90%; 
    height: 10%; 
    left: 0; 
    width: 100%; 
}

見JSFiddle snippet它在行動。

來源

2013-02-10 02:12:54 cdmckay

試試這個：http://jsfiddle.net/9gHY4/2/

#header { 
    position: absolute; 
    height: 20%; 
    width: 100%; 
    top: 0; 
    background-color: blue; 
} 
#content { 
    position: absolute; 
    top: 20%; 
    height: 70%; 
    width: 100%; 
    background-color: red; 
} 
#footer { 
    bottom: 0; 
    position: absolute; 
    height: 10%; 
    width: 100%; 
    background-color: green; 
}

來源

2013-02-10 02:33:33

如何爲HTML中的不同div分配修復百分比高度？

回答

相關問題