gpt4 book ai didi

html - 如何自动调整页脚的高度

转载 作者:太空宇宙 更新时间:2023-11-03 17:57:51 25 4
gpt4 key购买 nike

如何根据body内div内容的长度来调整footer的高度?

我尝试寻找一种解决方案,比如让页脚的位置“固定”,但这不是我想要的,因为它就像卡在屏幕底部一样。我希望页脚在我到达页面底部时显示,并在 main_content 高度发生变化时自动更改其高度,因为我已将 main_content 的高度设置为自动。我该怎么做?

它是这样的:http://jsfiddle.net/cherry12345/t62b2qb6/

这是我的代码:

HTML

<body>
<div id="main_content">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div id="footer">
&copy; 2014-2015 example.com. All Rights Reserved.
</div>
</body>

CSS

#main_content {
width: auto;
height:auto;
position:absolute;
top:110px;
left:400px;
background: #FFF;
border:1px solid lightgray;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
background: #666;
padding: 24px;
font-size: 12px;
color: #CCC;
text-align: center;
}

最佳答案

您可以重新安排和删除定位并让它像这样工作:

#main_content {
background: #FFF;
border:1px solid lightgray;
}
#main_content > p {
margin-left: 440px;
}
#main_content > p:first-child {
margin-top: 110px;
}
#footer {
background: #666;
padding: 24px;
font-size: 12px;
color: #CCC;
text-align: center;
}

<div id="main_content">
<p>Some text</p>
...
<p>Some text</p>
<div id="footer">&copy; 2014-2015 mysite.com. All Rights Reserved.</div>
</div>

http://jsfiddle.net/t62b2qb6/3/

关于html - 如何自动调整页脚的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25961558/

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