页面伸缩自适应，实时获取窗口高度
在实际开发中，网页缩放是常见的场景，当用户放大或缩小页面时，页面内容也需要相应自适应，确保页面始终铺满窗口。
获取窗口高度
要实现页面自适应，首先需要获取窗口实时高度。可以通过监听 window.resize 事件来实现。该事件会在窗口大小发生变化时触发，这时就可以在事件回调函数中获取窗口高度。以下是获取窗口高度的代码：
window.addEventListener('resize', function() {
const windowHeight = window.innerHeight;
// 处理后续逻辑
});设置页面高度
获取到窗口高度后，就可以设置页面高度。可以使用 CSS height 属性，将其设置为窗口高度即可。以下是设置页面高度的代码：
html, body {
height: calc(100vh);
}这样，无论用户如何放大或缩小页面，页面高度都会始终铺满窗口。注意，calc(100vh) 表示 100% 的可视高度，也可以使用 100% 直接设置。
以上就是如何让页面伸缩自适应窗口大小？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
619
收藏
