頁眉在始終頂頁腳底部

Basiclly我是儘量讓我的頭固定在頁面的頂部，並在同一時間，我還需要我的頁腳必須在頁面底部，whethere有是更少或更多的內容。但我不想要我的頁腳定位。所以，當數據頁腳移動到那個位置時，會有很大的變化。我現在使用的代碼是workin很好，如果我不做我的頭修復。頁眉在始終頂頁腳底部

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

CSS因爲這是

*{ margin:0px; padding:0px;} 
    html{ 
    margin:0; 
    padding:0; 
    height:100%; 
    } 
    body { 
    min-height:100%; 
    position:relative; 
    } 
    #header { 
    padding:10px; 
    background:#5ee; 
    } 
#content { 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

這是代碼，我沒有固定我的頭在這一點，但我需要一些幫助將其固定。

來源

2013-04-24 Adi

更換你的角色.... ＃內容{ 填充：10px的; padding-bottom：80px;/*頁腳元件的高度*/\t \t 最小高度：700像素; } #footer的{ 寬度：100％; height：80px; 位置：相對; 背景：＃ee5; } – hayat 2013-04-24 14:48:12

-4

使用此

position:fixed;

對於你的頭。

至於頁腳 - 使用此http://ryanfait.com/sticky-footer/

來源

2013-04-24 12:21:50 Deez

他明確表示他不希望使用固定 – 2013-04-24 12:22:31

也位置，如果一個頁面的內容長於窗口區域的內容。你會得到重疊的效果。 HAHAH :) – intelis 2013-04-24 12:23:07

如果我能爲編輯 – 2013-04-24 12:24:54

你在找什麼特別稱爲「粘頁腳」。

http://www.cssstickyfooter.com/

來源

2013-04-24 12:23:10 Adam

不錯，就是名字叫某人的實施方法= P – 2013-04-24 12:24:16

它不工作： – Adi 2013-04-24 13:11:14

加倍努力。有用。 – Adam 2013-04-24 13:12:03

如果我理解你的權利，在我看來，你一個棘手的頭之後是。試着用以下

 #header{ 
     background: none repeat scroll 0 0 #55EEEE; 
     padding: 10px; 
     position: fixed; 
     top: 0; 
     width: 100%; 
    } 
    #content{ 
     background: none repeat scroll 0 0 #FF0000; 
     color: #FFFFFF; 
     height: 2000px; 
     margin: 40px 0 0; 
     padding: 10px 10px 80px; 
    }

Here is the demo改變#content高度更換你的兩個規則影響的頁腳位置，但沒有頭的。

來源

2013-04-24 12:30:28 Ejaz

由於內容非常豐富，如果內容較少，我無法將高度添加到我的'＃內容'中，因此我必須'向下滾動'以查看頁腳。所以還有其他選擇。 – Adi 2013-04-24 12:59:20

高度已被分配給_＃content_僅用於演示目的。嘗試刪除它:) – Ejaz 2013-04-24 13:32:11

頁眉在始終頂頁腳底部

回答

相關問題