我想在页面底部放置一个页脚div。问题是，我有一个动态内容，所以我无法使用“position：fixed;”。
该页面如下所示：
<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>
当我单击导航栏中的链接时，另一个内容将加载ajax并写入“content”div。所以页面的高度会发生变化。当内容没有溢出时，页脚必须始终位于屏幕的底部，并且当内容过长时，页脚必须位于页面底部。我怎么能意识到这一点？
答案 0 :(得分：3)
使用动态内容，您可以随时使用：
sticky-css-footers-the-flexible-way
总是有帮助!! ：）
=============================================== ===================================
修改
<强> 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
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">My Dynamic Footer</div>
注意：在小提琴中，取消评论文本以查看在动态高度内容后伸展高度的页脚!!
参考： Refer here
答案 1 :(得分：2)
你想要查看“CSS Sticky Footer”：https://css-tricks.com/snippets/css/sticky-footer/ 这是你正在寻找的解决方案。
答案 2 :(得分：0)
哟可以使用这个结构：
position:absolute;
bottom:0;
width:100%;
height:150px;
并设置
position:Relative
为其父母。