適合所有屏幕的百分比定位

我正在製作一個網頁的佈局，我希望它在所有屏幕中具有相同的外觀。我正在處理的頁面有三個部分，標題，主要和頁腳，我希望頁眉位於屏幕的頂部。主頁面和頁腳粘貼到頁面的底部。適合所有屏幕的百分比定位

這是我想做的事：

我做了頭的頂部，但我不能添加百分比主要和頁腳部分。
另外在頭文件中有一個叫做'div5'的div，我希望它粘在父div的底部，這是主或中框。
在頁腳中我有三個框想要讓他們在左，右和中間。

你能看看linked site，讓我知道如何解決這些問題。

來源

2012-05-26 Dan S

請將代碼上傳到您的網站空間並將其公開，以便我們輕鬆觀看源代碼。 – nullpointr

JSFiddle鏈接：http://jsfiddle.net/NAUnP/ – Arka

僅當您將父元素設置爲具有高度時，百分比高度才起作用。

（元素會問「什麼比例？」）

這裏我們設置的高度，以身體

CSS

<style type="text/css"> 

     html,body { height:100%;} 

     #header { display:block; height:10%; } 
     #main { display:block; height:80%; } 
     #footer { display:block; height:10%; } 

</style>

標記

<body> 
    <div id="header"></div> 
    <div id="main"></div> 
    <div id="footer"></div> 
    </body>

來源

2012-05-26 20:45:07

更不用說這將是一個不尋常的用戶界面的願望，因爲寬度通常是問題，而不是高度。 –

通過這樣做，你正在使你重疊。確保即使這是照顧。是的，你必須考慮Css媒體查詢的選項。請通過演示here

來源

2012-05-26 22:39:04

適合所有屏幕的百分比定位

回答

相關問題