Html 努力理解css格式

我正在粗略地理解css的一些属性。在过去的几周里，我一直在一个网站上工作，作为一个整体，我能够做我一直在尝试做的事情，但是页脚/页眉等似乎是其中最不直观的部分

这就是我想要的

但是您可以看到页脚与正文内容重叠。我可以增加更多的利润，但总的来说，我的方法似乎有一些根本性的问题。我想做的主要事情是：

将内容添加到正文时，将页脚推到底部

即使正文中没有内容，也要将页脚放在底部

后来，我有了一个“音频播放器”，它基本上只是另一个div/row，占据了100%的屏幕宽度。我把它放在主体内部，我希望它固定在页面底部，直到用户向下滚动，在这一点上我希望它“粘”到主体底部（但不要重叠，或者页脚和页脚仍应在页面底部）

音频播放器和页脚之间也不应留有空白

我成功地完成了#1和#3，但第2次失败了。然后我回去试着把它修好，结果一切都乱成一团

<div class="fullContainer">
  <header class="siteHeader">
    Header Content
  </header>
   <div class="bodyContainer">
   <span>adding content</span><span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span> <span>adding content</span>
  </div>
  <footer class="siteFooter">
    Footer content
  </footer>
</div>

---

也许您可以尝试将页脚和页眉中的vh更改为em或rem，或者是px，因为在较小的屏幕中尝试时，高度和宽度可能会变得杂乱无章。

请尝试一下……您可以更改CSS样式以满足您的需要

html{
身高：100%；
背景色：白色；
宽度：100%；
最小宽度：1330px；
}
身体{
字号：10pt；
字体系列：calibri；
颜色：黑色；
最小高度：93%；
背景尺寸：封面；
背景色：#EEEEEE；
边框：1px纯黑；
边缘底部：30px；
宽度：98.8%；
字号：10pt；
字号：10pt；
}
.标题{
文本对齐：居中；
背景：#4DB5E7；
边框：1px纯黑；
底部边框：2件纯黑；
背景尺寸：封面；
高度：80px；
垂直对齐：中间对齐；
}
/*页脚*/
.底边距{
高度：1米；
}
.页脚{
位置：固定；
左：0px；
宽度：100%；
颜色：黑色；
文本对齐：居中；
背景：#E4FBFE；
字号：8pt；
底部：0；
填充：3倍；
边框：1px实心#BBBBBB；
字体大小：粗体；
}
.集装箱{
宽度：50%；
高度：400px；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景色：红色；
位置：相对位置；
}

添加内容添加内容添加内容
添加内容添加内容添加内容
添加内容添加内容添加内容
添加内容添加内容添加内容
添加内容添加内容添加内容
添加内容添加内容添加内容
添加内容添加内容
页脚运行良好

请将您的问题包含在一个列表中的所有相关代码中。您可以使用堆栈代码段（该图标类似于编辑器工具栏中的

）。如果没有HTML，CSS列表几乎毫无意义。无论是否有超过底部折叠的内容，或者是否有足够的内容完全覆盖视图端口，您是否试图将页脚保持在底部？页脚应该始终是流中的最后一件事，但是用户需要向下滚动浏览所有内容才能看到它。除非没有内容，在这一点上，我希望正文完全为空，但仍然保持页脚在页面底部可见。

.fullContainer {
  min-height: 100vh;
  position: relative;
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.bodyContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background-color: red;
  width: 100%;
  position: relative;
}

.siteFooter {
  height: 10vh;
  padding: 2vh, 0, 2vh, 0;
  background-color: black;
  width: 100%;
  bottom: 0;
  position: absolute;
}

.siteHeader {
  width: 100%;
  height: 10vh;
  position: absolute;
  top: 0;
  background-color: black;
}