Question

这是我正在处理的网站：http://antidote.treethink.com/about/

我试图获取它，以便页脚始终位于屏幕的底部，除非内容通过屏幕，然后它将位于内容之下。

要做到这一点，我想让“包装”div为100％min-height然后告诉页脚坐在该div的底部。我尝试将min-height类放在body，html和wrapper标签上，但它没有用。

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

谢谢，涉

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

Answer 2

这只是我的头脑。我的想法是创建一个容纳你内容的容器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/

100％高度问题

2 个答案: