如何让页面伸缩自适应窗口大小？

页面伸缩自适应，实时获取窗口高度

在实际开发中，网页缩放是常见的场景，当用户放大或缩小页面时，页面内容也需要相应自适应，确保页面始终铺满窗口。

获取窗口高度

要实现页面自适应，首先需要获取窗口实时高度。可以通过监听 window.resize 事件来实现。该事件会在窗口大小发生变化时触发，这时就可以在事件回调函数中获取窗口高度。以下是获取窗口高度的代码：

window.addEventListener('resize', function() {
  const windowHeight = window.innerHeight;
  // 处理后续逻辑
});

设置页面高度

获取到窗口高度后，就可以设置页面高度。可以使用 CSS height 属性，将其设置为窗口高度即可。以下是设置页面高度的代码：

html, body {
  height: calc(100vh);
}

这样，无论用户如何放大或缩小页面，页面高度都会始终铺满窗口。注意，calc(100vh) 表示 100% 的可视高度，也可以使用 100% 直接设置。

以上就是如何让页面伸缩自适应窗口大小？的详细内容，更多请关注其它相关文章！