CSS - 標題 - 永遠底部頁腳和100％含量

<body> 
    <div id="wrap"> 
     <div id="header"> 
      HEADER 
     </div> 
     <div id="inner-wrap"> 
      <div id="content"> 
       CONTENT 
      </div> 
     </div> 
     <div id="footer"> 
      FOTTER 
     </div> 
    </div> </body>

和CSS：CSS - 標題 - 永遠底部頁腳和100％含量

html { height:100%; max-height:100%; } 

body { 
    margin:0; 
    padding:0; 
    height:100%; 
    max-height: 100%; 
} 

#wrap { 
    min-height:100%; 
    height: 100%; 
    position:relative; 
} 
* html #wrap { height:100% } 

#inner-wrap { 
    padding-bottom:50px; 
    min-height: 100%; 
} 
#inner-wrap:after { 
    content:" "; 
    display:block; 
    clear:both; 

} 
* html #inner-wrap { 
    height:100%; 
} 

#header 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 16px; 
    color: White; 
    text-align: center; 
    position: relative; 
    top:0px; 
} 
#footer 
{ 
    width: 100%; 
    background-color: #C0C0C0; 
    height: 50px; 
    position:absolute; 
    bottom: 0; 
    color: White; 
    text-align: center; 
} 
#content 
{ 
    width: 1000px; 
    height: 100%; 
    background-color: #F5FDEC; 
    margin: 0 auto 0 auto; 
}

問題：

我怎麼能做出這樣的：頭球攻門頂16px的，內容的動態100％的高度， FOOTER在頁尾

如果我給100％內部換行DIV，它們在頁腳之後是空格。

THX

來源

2011-02-03 David Horák

我認爲解決方案的一個組成部分是添加`體{身高：100 ％;}`也。 – Kyle 2011-02-03 10:03:16

謝謝@Pekka。這是不可讀的。 – Shikiryu 2011-02-03 10:05:20

你有太多的高度回事：

從你選擇刪除min-height和max-height值。

刪除position: absolute;從你的#wrap div。

我做了一個例子for you here。

來源

2011-02-03 11:48:49 Kyle

對於定位在固定位置下方的頁腳當您滾動網頁使用的是不動：

#footer{ 
position:fixed; 
clear:both; 
}

來源

2012-12-17 11:06:09 Fabio

CSS - 標題 - 永遠底部頁腳和100％含量

回答

相關問題