100％身高問題

是我工作的網站：我想，除非內容跑過屏幕得到它，這樣頁腳總是在屏幕的底部http://antidote.treethink.com/about/100％身高問題

，然後它會坐在內容下面。

要做到這一點，我認爲「包裝」div是100％最小高度，然後告訴頁腳坐在該div的底部。我試圖在body，html和wrapper標籤上放置min-height類，但它不起作用。

這是我的CSS：http://antidote.treethink.com/wp-content/themes/antidote-new/style.css

感謝，韋德

2010-12-18 Wade D Ouellet

你可以試試經典解決方案

<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 */ 
    }

來源

2010-12-18 02:41:40 Flack

當然#header是可選的。 – Flack 2010-12-18 02:44:51

這只是從我的頭頂。我的想法創建一個容器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/

來源

2010-12-18 02:39:59 jeremysawesome

100％身高問題

回答

相關問題