当前位置：文江博客话题详情

100%高度问题

发布于 2024-10-08 08:56:26 字数 469 浏览 4 评论 0原文

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

我我试图让页脚始终位于屏幕底部，除非内容超出屏幕，然后它将位于内容下方。

为此，我认为让“包装器”div 的最小高度为 100%，然后告诉页脚位于该 div 的底部。我尝试将 min-height 类放在 body、html 和包装标签上，但它不起作用。

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

谢谢，韦德

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逐鹿 2024-10-15 08:56:26

您可以尝试经典的解决方案

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

You can try classic solution

<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 原文

┾廆蒐ゝ 2024-10-15 08:56:26

这就是我的想法。我的想法是创建一个容器 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-页面底部/

This is just off the top of my head. My thought create a container div that holds your content. Put the footer at an relative position of bottom: 0px; within that.

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

I think that should work...

Edit

Actually the top of my head is not right. This post has helped me in the past though...
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

回复收藏 0 原文

~没有更多了~