Html 如何定位具有浮动属性的内容的页脚

我们的项目之一是创建这个基本的网站，有一个主页，登录页面，管理页面

我已经做了基本的轮廓，我只是不能正确地确定div的位置。 所有页面必须有页眉和页脚，并应与所有页面一致

在我的管理页面上， 我已将收割台正确定位。内容是6张图片在3x2的网格，我已经做了使用浮动lefs安排他们。但是我的页脚不能定位在页面的底部，即使它有

底部：0px
我该如何解决这个问题

这是我第一次在这个网站上问，我不知道如何显示我的代码，所以你们都可以看到我做了什么


.foot{
宽度：100%；
高度：150像素；
背景图片：url（images/maoheader.jpg）；
背景尺寸：包含；
位置：绝对位置；
底部：0；
}
塞福特先生{
宽度：100%；
高度：150像素；
背景图片：url（images/divider.png）；
背景尺寸：包含；
位置：相对位置；
底部：74px；
z指数：1；
}
.foot1{
填充：15px；
}
.螺柱{
宽度：550px；
高度：350px；
边框：rgb（70,24,49）实心3px；
}
.sFrame{
宽度：550px；
高度：350px；
利润率：40像素；
位置：相对位置；
浮动：左；
}

基亚奥拉奥特罗亚酒店
库名称
A-Z
虚构的
非小说类
作者
创建人：Pete Castolome
s00019257

+64 021 23456789

petecastolome@yahoo.com


.foot{
宽度：100%；
高度：150像素；
背景图片：url（images/maoheader.jpg）；
背景尺寸：包含；
显示器：flex；
底部：0；
}
塞福特先生{
高度：150像素；
背景图片：url（images/divider.png）；
背景尺寸：包含；
位置：相对位置；
/*底部：74px*/
z指数：1；
}
.foot1{
填充：15px；
}
.螺柱{
宽度：550px；
高度：350px；
边框：rgb（70,24,49）实心3px；
}
.sFrame{
宽度：550px；
高度：350px；
利润率：40像素；
位置：相对位置；
浮动：左；
}
#示例img{宽度：150px；
高度：150像素；
背景：黑色；}

管理页面
基亚奥拉奥特罗亚酒店
图书馆名称
A-Z
虚构的
非小说类
作者
创建人：皮特·卡斯托洛姆

s00019257

+6402123456789

petecastolome@yahoo.com

来自上面的评论

我建议您仅在需要重叠的情况下使用position，并且仅在希望文本在内容中围绕图像“环绕”时使用float。探索
显示：flex用于类似布局的列

例如：

移除所有
位置
ing，现在继续使用源代码顺序。随着页面内容变长，页脚将出现在内容的底部

对于页面内容：

HTML

只要把你的页脚DIV从任何容器中取出，它就会工作。另外请注意，如果页面内容的高度小于窗口显示高度，则页脚可能会出现在底线上方。“最小高度：100%；”到BODY标记将修复此问题。
您可以通过选择代码并使用编辑器工具栏中的
{}
图标对其进行格式化来添加带有格式的代码。这将把它缩进4个空格，这将告诉编辑器它是要格式化的代码。您可以看到下面的格式化输出。您可能已经获得了此部分，但是您需要将
位置
属性与
底部
一起使用。但是，您可能根本不需要定位元素。取而代之的是“源顺序”，页眉在内容之前，页脚在内容之前，元素将一个置于另一个之下，并根据每个部分中的元素具有固有的高度。@dylanjameswagner我尝试过应用“源顺序”，但实际情况是，我的页脚将初始定位在屏幕底部，即使仍有需要滚动的页面内容。如果我向下滚动，看起来页脚在网站的中间。你的<代码>英尺英尺/代码>在代码< >内。测试和测试只和它的内容一样高，所以当你定位页脚时，它被定位在<代码>的底部。测试< /C> >，或者覆盖你的其他内容。如果不把它们放在我的机器上，我就说不出来。如果你不定位任何元素，重叠就不会发生。本质上，页脚将存在于文档的“底部”，如果页面内容较短，页脚可能不是视口的底部。它完成了这项工作。现在我需要重新定位我的.sepfoot。我用sepfoot的目标只是设计。我将图片与页脚重叠，使其看起来像边框。在我的其他页面上，我的代码看起来不错，但在我的管理页面上，它在我的.nav和.test容器之间，图片在那里..我修复了代码。你能检查一下吗？如果没有，你能添加任何你想要的关于页脚的img吗？我得到了我想要的结果，感谢display flex的想法。如果你真的想要/需要“粘性页脚”您可以在
body
上使用
flex
或
grid
以及其他支持样式，但如上所述，要正确操作可能有点麻烦。谢谢！flex属性修复了我的内容位置，并在所有内容的底部维护我的页脚。这正是我想要的。
<div class="flex-parent">
     <div class="flex-child sFrame"><img src="images/s1.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s2.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s3.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s4.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s5.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s6.jpg" class="stud"></div>
</div>

.flex-parent {
    diplay: flex;
    flex-wrap: wrap;
}

.flex-child {
    width: calc(100% / 3);
}