本文共 931 字，大约阅读时间需要 3 分钟。

在实际开发中，页面的高度自适应是一个非常重要的布局需求。无论是网页的整体高度，还是某些特定容器的高度，都需要根据不同的浏览器窗口大小进行调整。这对于确保页面在各种设备和屏幕尺寸下都能良好呈现具有重要意义。

当我们需要让页面的高度完全适应浏览器窗口时，vh单位是一个非常有用的选择。vh代表"视口高度"，它将浏览器视口横向分为100等分，100vh则意味着占据整个浏览器窗口的高度。这种方式特别适用于需要全屏布局的页面。

在实际应用中，如果页面顶部有一些固定元素（例如导航栏），我们可以通过计算浏览器窗口高度减去导航栏的高度来设置容器的高度。例如，如果导航栏的高度是60px，那么我们可以将高度设置为calc(100vh - 60px)。这种方法既灵活又高效，能够适应不同浏览器窗口的大小。

对于较旧的浏览器版本，某些情况下可能会出现布局问题。为了解决这些问题，可以使用jQuery来动态调整容器的高度。通过在页面加载时绑定一次初始设置，并在浏览器窗口大小发生变化时进行再次调整，可以确保容器始终保持合适的高度。例如：

function setSizes() {    var containerHeight = $("#listContainer").height();    $("#myList").height(containerHeight - 18);}

为了确保容器的高度始终与浏览器窗口同步，我们可以在页面加载时立即调用这个函数，并且在浏览器窗口大小发生变化时自动触发更新。例如：

$(window).resize(function() {    setSizes();});

在处理旧浏览器时，特别是IE6，可能需要使用一些hack技术来模拟vh的效果。例如，可以通过在HTML标签上添加padding-top来模拟vh的高度。这种方法虽然不像现代浏览器那样直接支持vh单位，但对于无法支持现代标准的浏览器仍然有效。

总的来说，高度自适应布局是一种灵活且实用的设计方式。通过合理运用vh单位、calc函数以及响应式设计，我们可以轻松实现页面高度与浏览器窗口大小的无缝适配。无论是通过现代的CSS标准，还是通过脚本动态调整，都是值得推荐的解决方案。