Html 使页脚保持在底部，不带正文{高度：100%}

如果我为我的模板设置

html，body{height:100%}

，就会发生一些奇怪的事情。它很难描述，也不可能在小提琴中重现问题，因为它只发生在本地主机上。当我尝试保存页面并运行该页面时，问题消失了

这是我的问题：

如果内容未填满页面，我试图使

页脚保持在页面底部，但如果内容沿y方向溢出页面，页脚应位于内容底部，即表现为正常元素

我试着这样做：

html, body {
    height: 100%;
}

body {
    position: relative;
}

footer {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
}

这确实有效，但给了我一点延迟。当我刷新页面时（当内容没有溢出时），页脚位于内容的末尾，而不是页面的底部，正如预期的那样。但是大约0.5秒后，页脚会进入底部

我在页面底部有一个CSS切换按钮，当我使用它时，页脚不会显示这种奇怪的行为。所以我认为这不是CSS的错。另外，使用
ctrl+s
保存页面，然后运行保存的页面不会显示此问题，因此可能是因为Django

这是我的代码：这是保存的页面的RAR:
为容器div应用最小高度&&为body div应用与页脚高度匹配的填充底部


<div id="container">
    <div id="header"></div>
    <div id="body">
        <!-- content here -->

    </div>
    <div id="footer"></div>
</div>

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}


html，
身体{
保证金：0；
填充：0；
身高：100%；
}
#容器{
最小高度：100%；
位置：相对位置；
}
#标题{
背景：#ff0；
填充：10px；
}
#身体{
填充：10px；
填充底部：60px；/*页脚高度*/
}
#页脚{
位置：绝对位置；
底部：0；
宽度：100%；
高度：60px；/*页脚高度*/
背景：#6cf；
}
在
图书容器中使用
最小高度
样式
这是HTML/CSS问题。如果工作不正常，那么可能是样式重叠。使用浏览器的
Inspect元素
功能进行检查。只有当样式标记或css文件加载不正确时，才可能是Django问题。@mshsayem我不能使用
min height
，因为它不能在所有分辨率上工作。@Bibhas如果是HTML/css问题，那么，为什么它没有发生在保存的页面中？您想要吗？如果
body
具有
height:100%
则会出现问题，因此这并不能解决问题。另外，制作
容器{height:100%}
，在我的例子中是
书籍容器
，使其与
主体一样长