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; 
}

問題：HEADERトップに16px、 CONTENTダイナミックな100％の高さ：私はこのことができますどのように

、フッタ末尾

内側ラップDIVに100％を与えると、フッタの後に空白が入ります。あなたが起こってあまりにも多くの高さを有して

Thxを

出典

2011-02-03 David Horák

私は解決策の一部が 'ボディ{高さを追加することだと思う：あなたはWebページがこれを使用するスクロールすると移動しない固定位置の底部に配置フッターの – Kyle

ありがとう@Pekka。それは判読不能でした。 – Shikiryu

申し訳ありませんが、私は霧をボディにbody、body {height：100％; }、これは効果がありません。 –

：

あなたのセレクタからmin-heightとmax-height値を削除します。

position: absoluteを削除してください。あなたの#wrap divから

私は例for you hereを作成しました。

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

出典

2011-02-03 11:48:49 Kyle

コンテンツが大きくなると動作しないようです... http://jsfiddle.net/KeesCBakker/5fryQ/8/ –

フッターの位置をrelativeに変更してください：http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/10 /不要なルールを削除するために編集されています。 – Kyle

http://jsfiddle.net/Kyle_Sevenoaks/5fryQ/11/ jQueryが追加された別の例では、より多くのコンテンツを追加すると、実際にはフッターがどこにあるのかを知ることができます:) – Kyle

100 ％;} `また。

出典

2012-12-17 11:06:09 Fabio

CSS - ヘッダー - 常に一番下のフッターと100％の内容

答えて

関連する問題