CSS实例-让页脚保持在未满屏页面的底部

在浏览网页时，你是否注意到过一种特殊的页面设计，那就是当内容不超过一屏时，页脚文字会随着浏览器窗口的缩小而向上浮动，但依然保持在页面的底部。而当内容超过一屏时，页脚始终固定在网页的最下方，无论窗口大小如何变化。

这种设计效果的实现离不开精妙的JS脚本和HTML代码。我们需要一段用于检测页面元素和窗口尺寸的JS脚本。当页面的内容不足以填满整个窗口时，页脚会通过这段脚本被设置为绝对定位，并紧贴窗口底部。而当内容足够填满窗口时，页脚则恢复默认定位。

以下是实现这一效果的HTML和JS代码示例：

我们需要在HTML中设置两个主要区域，一个用于显示主要内容，另一个用于显示页脚。

```html

```

在这个示例中，当页面的主要内容不足以填满整个窗口时，页脚会被设置为绝对定位并紧贴窗口底部。而当内容足够填满窗口时，页脚则恢复默认定位，随页面内容滚动。这种设计确保了用户在浏览网页时始终能够方便地找到页脚，提升了用户体验。通过巧妙的JS脚本和HTML代码，我们实现了这一动态效果，使得页面更加生动和吸引人。