gpt4 book ai didi

html - 将 div 放在带有动态内容的页面底部

转载 作者:太空狗 更新时间:2023-10-29 12:35:01 26 4
gpt4 key购买 nike

我想在页面底部放置一个页脚 div。问题是,我有一个动态内容,所以我不能使用“position: fixed;”。

页面看起来像这样:

<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>

当我单击导航栏中的链接时,另一个内容使用 ajax 加载并写入“内容”div。所以页面的高度发生了变化。当内容没有溢出时,页脚必须始终位于屏幕底部;当内容太长时,页脚必须位于页面底部。我怎样才能意识到这一点?

最佳答案

对于动态内容,您可以随时使用:

sticky-css-footers-the-flexible-way

总是有帮助!! :)

============================================= ===================================

编辑

see this demo

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>

注意:在 fiddle 中,取消注释文本以查看在动态高度内容之后拉伸(stretch)高度的页脚!!

引用: Refer here

关于html - 将 div 放在带有动态内容的页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20760422/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com