将div放在页面底部，包含动态内容
[英]Place div on bottom of page with dynamic content
问题描述
I want to place a footer div at the bottom of the page. 
我想在页面底部放置一个页脚div。 The problem is, I have a dynamic content, so I can not work with "position: fixed;". 问题是，我有一个动态内容，所以我无法使用“position：fixed;”。
The page looks something like this: 该页面看起来像这样：
<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>
When I click a link in the navbar, another content is loaded with ajax and written in the "content" div. 当我单击导航栏中的链接时，另一个内容将加载ajax并写入“content”div。 So the height of the page changes. 所以页面的高度会发生变化。 The footer must always be at the bottom of the screen, when there is no overflow of the content and must be at the bottom of the page, when the content gets too long. 当内容没有溢出时，页脚必须始终位于屏幕的底部，并且当内容过长时，页脚必须位于页面底部。 How can I realize this? 我怎么能意识到这一点？
3 个解决方案
解决方案1
3 2013-12-24 11:57:12
with dynamic content, you can always use this: 使用动态内容，您可以随时使用：
sticky-css-footers-the-flexible-way 粘CSS-页脚最灵活的路
always helps!! 永远有帮助!! :) :)
================================================================================== ================================================== ================================
EDIT 编辑
CSS CSS
html, body, #container {
height: 100%;
margin:0;
padding:0;
}
body > #container {
height: auto;
min-height: 100%;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:grey;
}
#content {
padding-bottom: 3em;
}
HTML HTML
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">My Dynamic Footer</div>
Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!! 注意 ：在小提琴中，取消评论文本以查看在动态高度内容后伸展高度的页脚！
Reference : Refer here 参考 ： 请参阅此处
解决方案2
2 已采纳 2013-12-24 13:36:02
您将要查看“CSS Sticky Footer”： https ： //css-tricks.com/snippets/css/sticky-footer/这是您正在寻找的解决方案。
解决方案3
0 2013-12-24 11:54:41
Yo can use this Structure: 哟可以使用这个结构：
position:absolute;
bottom:0;
width:100%;
height:150px;
and set 并设定
position:Relative
for its parent. 为其父母。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.