html - 如何修复底部在垂直滚动时始终显示

Question

我里面有 ul 和一些列表。

在 ul 的底部，我有一个始终显示内容的 div 标签

我不能用 div 包装 ul 标记或更改 html 的结构。

有什么办法吗？

<ul>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
          .
          .
          .
   <div> Message always shown at the bottom </div>
</ul>

标签： htmlcss

Answer 1

如果您可以使用 CSS，只需将其应用于 div：

div {
    position: fixed;
    bottom: 0;
}

运行以下代码段：

div {
    position: fixed;
    bottom: 0;
}

<ul>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <div> Message always shown at the bottom </div>
</ul>

此外，如有必要，您可以将样式直接应用于div以下内容：

<div style="position: fixed; bottom: 0;"> Message always shown at the bottom </div>

下面的实时示例：

<ul>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <div style="position: fixed; bottom: 0;"> Message always shown at the bottom </div>
</ul>