2010-12-18 42 views
0

は、ここで私が働いているサイトです内容の下に座る。100%の高さの問題

これを行うには、「wrapper」divを100%min-heightにしてからフッターをそのdivの下部に置くと考えました。 body、html、wrapperタグにmin-heightクラスを入れてみましたが、うまくいきませんでした。

これは私のCSSです:http://antidote.treethink.com/wp-content/themes/antidote-new/style.css

おかげで、 ウェイド

答えて

1

あなたは古典的な解決策を試すことができます...しかし、過去に私を助けている

<div id="header-content"> 
    <div id="header"> 
     bar 
    </div> 
    <div id="content"> 
     bar 
    </div> 
</div> 
<div id="footer"> 
    foo 
</div> 

のmain.css

html, 
body { 
    height:100%; 
    } 
#header-content { 
    position:relative; 
    min-height:100%; 
    } 
#content { 
    padding-bottom:3em; 
} 
#footer { 
    position:relative; 
    height:3em; 
    margin:-3em 0 0; 
    } 

ie.css
* HTML #header-content { 
    height:100%; /* min-height for IE<7 */ 
    } 
+0

もちろん#headerはオプションです。 – Flack

0

これはちょうど私の頭の上からです。私の考えはあなたのコンテンツを保持するコンテナのdivを作成します。フッターをその中のbottom: 0px;の相対位置に置きます。

私はそれが動作するはずだと思う
<div id="content-container"> 
    <div id="page-content" style="position: relative;"><p>This holds my content</p></div> 
    <div id="footer" style="position: relative; bottom: 0px;"> 
     <p>Footer content in here</p> 
    </div> 
</div> 

...

編集

実は私の頭の上には、右ではありません。この投稿は http://ryanfait.com/resources/footer-stick-to-bottom-of-page/