gpt4 book ai didi

jquery - 动态创建的div定位问题

转载 作者:太空宇宙 更新时间:2023-11-04 15:56:35 24 4
gpt4 key购买 nike

我在下面的heirachy中创建div

<div class="box">
Content goes here
<div class="footer>Footer</div>
</div>
<div class="box">
Content goes here
<div class="footer>Footer</div>
</div>
<div class="box">
Content goes here
<div class="footer>Footer</div>
</div>

主框“box”是可滚动的。我希望页脚“footer”保留在父容器的底部,即“box”。我在谷歌上搜索了三天。没有工作。很着急。请帮忙

最佳答案

你必须像 Sarfraz 上面说的那样使用绝对位置和底部 0。

这里是示例代码:

<html> 
<head>
<style>
body { width:100%;}
.box { float: left; height: 200px; margin-right: 5%; position: relative; width: 20%;}
.footer {bottom: 0px; position: absolute; width: 100%; text-align: center;}
.box_content{ height: 180px; overflow-y: scroll;}
.clear { clear:both;}
</style>
</head>
<body>
<div class="box">
<div class="box_content">
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
</div>
<div class="footer">Footer</div>
</div>
<div class="box">
<div class="box_content">
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
</div>
<div class="footer">Footer</div>
</div>
<div class="box">
<div class="box_content">
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
Content goes here <br />
</div>
<div class="footer">Footer</div>
</div>
<div class="clear"> </div>
</body>
</html>

关于jquery - 动态创建的div定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10371932/

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