gpt4 book ai didi

html - 基于最小高度的 CSS 页脚固定位置

转载 作者:可可西里 更新时间:2023-11-01 13:37:23 27 4
gpt4 key购买 nike

我看过这里和各种教程,但无法达到我需要的效果。

因此,如果页面内容低于 600 像素,我希望页脚固定在该高度的容器下方。

但如果内容将容器高度增加到超过 600 像素,则页脚应由容器向下推页面。

我试过使用最小高度来发挥作用,我的 html 看起来像这样

<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>

我不会费心发布 CSS,因为它还差得远。

最佳答案

你可以通过 CSS 技巧做到这一点,

/* CSS 代码 */

body, html{
padding:0;
margin:0;
height:100%;
}

.wrapper{
min-height:100%;
position:relative;
}

.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}

.header{
height:100px;
background-color:#066;
}

.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}

<div class="wrapper">
<div class="container">

<div class="header">
Header
</div>

<div class="body">

</div>


</div>

<div class="footer">
Footer
</div>

</div>

这是我的 Fiddle File

关于html - 基于最小高度的 CSS 页脚固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13256883/

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