```html

这是页面的主要内容

这里是一些文本内容。

```

在上述代码中，我们使用了 CSS 的 `position: fixed;` 将 `footer` 元素固定在页面的底部。`bottom: 0;` 确保它紧贴着页面的底部边缘。`width: 100%;` 使它占据整个页面的宽度。

方法二：结合 CSS 的 flexbox 布局

利用 CSS 的 flexbox 布局可以更灵活地创建固定底部的元素。

```html

```

这里通过 `display: flex;` 和 `flex-direction: column;` 将页面的布局设置为垂直方向的 flex 容器。`main` 元素占据剩余的空间（`flex: 1;`），而 `footer` 元素则自动定位在底部。

方法三：使用 JavaScript 实现

如果需要根据页面的滚动情况来动态调整固定底部元素的位置，或者在某些特定情况下需要更复杂的交互，可以使用 JavaScript 来实现。

```html

这是页面的主要内容

这里是一些文本内容。

```

在这个例子中，我们通过 CSS 的过渡效果（`transition`）来实现固定底部元素的平滑显示和隐藏。当页面滚动时，JavaScript 监听 `scroll` 事件，并根据滚动的距离来调整 `footer` 元素的 `bottom` 属性。

在 HTML 中创建固定底部的元素可以根据具体的需求选择合适的方法。使用 CSS 的 `position` 和 `bottom` 属性是最简单直接的方式，而 flexbox 布局则提供了更灵活的布局选项。如果需要动态交互，JavaScript 可以帮助实现更复杂的功能。无论选择哪种方法，都可以轻松地在网页中创建一个固定在底部的元素，提供更好的用户体验。