Html 防止页脚与float重叠

我已经创建了一个气泡对话html。 现在我正在尝试添加一个页脚。 中的类似代码

保险商实验室{ 列表样式：无； 保证金：0； 填充：0； } ulli{ 显示：内联块； 明确：两者皆有； 填充物：5px； 边界半径：20px； 边缘底部：2px； 宽度：80%； 背景：eee； } .他{ 浮动：左； 边框：1px实心000000； } .我{ 浮动：对； } 页脚{ 高度：30px； 位置：固定； 左：0； 底部：0； 宽度：100%； 背景色：红色； 颜色：白色； 文本对齐：居中； } 身体{ 填充底部：30px； } N-19 N-18 N-17 N-16 N-15 N-14 N-13 N-12 N-11 N-10 N-9 N-8 N-7 N-6 N-5 N-4 N-3 N-2 N-1 N 页脚 由于填充底部不能在这里应用，我的答案不适合这种情况，因此我对所提出的网格布局的备选方案进行了研究，令人惊讶的是，对页脚块的固定位置进行了研究

在本例中，我决定将代码保留为不带，因为其中有一个相当大的列表。我假设第一条消息总是来自用户，并使用：notcss选择器来设置回复块的样式。您可以根据HTML将.user和：notuser更改为任何类，如.me和.him

节{显示：柔性；柔性方向：列} 第*{ 宽度：75%； 边框：1px实心7575； 边界半径：20px； 填充：2x10px； 底部边距：2倍 } .用户{ 背景：ccc； 左边距：自动 } 部分：not.user{ 背景：eee } 节：not.user+.user、.user+：not.user{ 页边空白：5px } 页脚{ 高度：30px； 位置：sticky；/*是。它现在可以工作了*/ 底部：0； 背景：2000人； 颜色：白色； 文本对齐：居中； 线高：28px } 需要一些关于HTML的帮助吗 也许还有CSS 你知道，我希望它也能处理长消息。在所有浏览器中，甚至IE。。。 当然 让我们测试一下这个 2019年浏览器支持方面相当不错 厉害！ 多谢各位 不客气 再见 粘脚

由于填充底部不能在这里应用，我的答案不适合这种情况，因此我对所提出的网格布局的备选方案进行了研究，令人惊讶的是，对页脚块的固定位置进行了研究

在本例中，我决定将代码保留为不带，因为其中有一个相当大的列表。我假设第一条消息总是来自用户，并使用：notcss选择器来设置回复块的样式。您可以根据HTML将.user和：notuser更改为任何类，如.me和.him

节{显示：柔性；柔性方向：列} 第*{ 宽度：75%； 边框：1px实心7575； 边界半径：20px； 填充：2x10px； 底部边距：2倍 } .用户{ 背景：ccc； 左边距：自动 } 部分：not.user{ 背景：eee } 节：not.user+.user、.user+：not.user{ 页边空白：5px } 页脚{ 高度：30px； 位置：sticky；/*是。它现在可以工作了*/ 底部：0； 背景：2000人； 颜色：白色； 文本对齐：居中； 线高：28px } 需要一些关于HTML的帮助吗 也许还有CSS 你知道，我希望它也能处理长消息。在所有浏览器中，甚至IE。。。 当然 让我们测试一下这个 2019年浏览器支持方面相当不错 厉害！ 多谢各位 不客气 再见 粘脚

看看这个：css网格是css的一个非常好的属性。 我们可以将屏幕分为若干列和若干行。我在这里使用css网格

有关css网格的更多信息，请阅读

保险商实验室{ 列表样式：无； 保证金：0； 填充：0； 显示：网格； 网格模板列：33%33%34%； } ulli{ 显示：块； 明确：两者皆有； 填充物：5px； 边界半径：20px； 边缘底部：2px； 背景：eee； } .他{ 网格柱：1/3； 边框：1px实心000000； } .我{ 格线柱：2/4 } 页脚{ 高度：30px； 位置：固定； 底部：0； 宽度：100%； 背景色：红色； 颜色：白色； 文本对齐：居中； } 身体{ 填充底部：30px； } N-19 N-18 N-17 N-16 N-15 N-14 N-13 N-12 N-11 N-10 N-9 N-8 N-7 N-6 N-5 N-4 N-3 N-2 N-1 N 页脚 看看这个：css网格是css的一个非常好的属性。 我们可以将屏幕分为若干列和若干行。我在这里使用css网格

有关css网格的更多信息，请阅读

保险商实验室{ 列表样式：无； 玛格 in:0； 填充：0； 显示：网格； 网格模板列：33%33%34%； } ulli{ 显示：块； 明确：两者皆有； 填充物：5px； 边界半径：20px； 边缘底部：2px； 背景：eee； } .他{ 网格柱：1/3； 边框：1px实心000000； } .我{ 格线柱：2/4 } 页脚{ 高度：30px； 位置：固定； 底部：0； 宽度：100%； 背景色：红色； 颜色：白色； 文本对齐：居中； } 身体{ 填充底部：30px； } N-19 N-18 N-17 N-16 N-15 N-14 N-13 N-12 N-11 N-10 N-9 N-8 N-7 N-6 N-5 N-4 N-3 N-2 N-1 N 页脚

---

---

或者只需在ul上添加衬垫底部itself@Cathy如果页面的HTML部分是自动生成的，那么CSS仍然是最好的解决方案。我的意思是添加CSS，而不是最后一个孩子：只需将它添加到ul本身。它也可以放在body标签上，以防内容发生变化@森派。D@Cathy对不起，我以为你是说最后一个李内联样式作为旁注-是.me和.him项目上的浮动导致身体底部填充不起作用。使用不同的方式来布局列表，可能类似于所提供的网格解决方案by@Naveen耆那教，将消除该问题。或者只是在ul上添加填充底部itself@Cathy如果页面的HTML部分是自动生成的，那么CSS仍然是最好的解决方案。我的意思是添加CSS，而不是最后一个孩子：只需将它添加到ul本身。它也可以放在body标签上，以防内容发生变化@森派。D@Cathy对不起，我以为你是说最后一个李内联样式作为旁注-是.me和.him项目上的浮动导致身体底部填充不起作用。使用不同的方式来布局列表，可能类似于所提供的网格解决方案by@NaveenJain，我会解决这个问题。我刚刚分享了你想要的解决方案。如果你想要优化的解决方案，我可以给你。我刚刚分享了你想要的解决方案。如果你想要优化的解决方案，我可以给你。不如做一个比检查更彻底的解释吧？页脚正在工作，但现在me气泡的右边有空白。它们没有粘在.me和.him元素上的右边marginfloat上，这似乎是导致主体{padding bottom:30px}无法按预期应用的原因。使用不同的布局方法可以消除这个问题。@Cathy我想他问过，如果你看到第一段，如何制作固定页脚。我们不是要结束这个问题，而是要给出另一个解决方案，这样至少现在他可以决定什么对他最有利。选择什么。@NaveenJain我不需要float属性。但我需要保持对话的视觉效果。好像是.him{grid column:1/4；width:75%；}和.me{grid column:2/4}做了这个把戏。如果你上传答案，我会接受。ThanksHow关于比查看此内容更彻底的解释？页脚正在工作，但现在me气泡的右侧有空白。它们没有粘在.me和.him元素上的右边marginfloat上，这似乎是导致主体{padding bottom:30px}无法按预期应用的原因。使用不同的布局方法可以消除这个问题。@Cathy我想他问过，如果你看到第一段，如何制作固定页脚。我们不是要结束这个问题，而是要给出另一个解决方案，这样至少现在他可以决定什么对他最有利。选择什么。@NaveenJain我不需要float属性。但我需要保持对话的视觉效果。好像是.him{grid column:1/4；width:75%；}和.me{grid column:2/4}做了这个把戏。如果你上传答案，我会接受。谢谢