Question

我的页脚显示在我的内容底部，直到我向下滚动然后再向上，然后它在我的内容中间显示在我的内容中间。

我做了几个网页我发现它很有趣我刚遇到这个问题，我已经使用类似的代码到其他项目。

Heres是我的HTML和CSS。

 <body> 
 <div id="wrapper">
 <header>
    <nav>
    </nav>
 </header>
    <div id="content">
    </div> 
 </div>
    <footer>
    </footer>
 </body>

CSS：

#body {
width: 100%; 
background-color: #ebebeb;
margin: 0;
padding: 0;}

#nav{
margin:0;
padding:0px;
text-align:center;
width: 100%;
height: 44px;
position: fixed;
z-index: 15;
clear: both;}

#wrapper {
width: 100%; 
min-height: 100%;
margin: 0;
padding: 0;
z-index: 10;
clear: both;
overflow: auto;}

#content-form {
width: 50%;
height: auto;
background-color: white;
    margin-top: 100px;
margin-left: 25%;
margin-right: 25%;
margin-bottom: 0;   
padding: 1em;
padding-bottom:0;
text-align: center;}

#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
clear: both;
background-color: #ffffff;
display: inline-block;
margin: auto;
padding: auto;
z-index: 5;}

Answer 1

将您的身体position更改为relative。 Here's a codepen。我猜你没有从你的实时代码剪切和粘贴这个，因为你的css包含#body之类的东西。我把那些东西固定在笔上。

Answer 2

尝试为body和html标签提供100％的最小高度。如果内容未填满整个视口，则绝对位置设置为bottom：0实际上不会位于底部。

将页脚保持在包装/内容的下方或底部

2 个答案: