屏幕大小调整 Javascript

Screen Resizing Javascript

本文关键字:Javascript 调整 屏幕      更新时间:2023-09-26
function sizeChange() {
    var container = document.getElementById('container');
    var main = document.getElementById('main');
    var content = document.getElementById('content');
    var h = window.innerHeight;
    container.style.height = h;
    main.style.height = h*.9;
    content.style.height = (h*.9)*.9;
}
document.addEventListener("resize", sizeChange);

我正在尝试操作 html 中的项目,以便容器的高度始终是窗口的高度,并且当它缩放时,容器的高度会缩放。我已经设置了它,以便它获取它将要操作的每个元素的 ID,然后按我想要的 % 进行调整。有没有人对为什么会发生这种情况有任何反馈?

我认为你正在做的大部分事情都可以用CSS完成。 如果你想坚持使用JS,那么你需要在你的值中添加单位。 因此,将代码更改为类似

container.style.height = h+"px";
main.style.height = Math.floor(h*.9)+"px";
content.style.height = Math.floor((h*.9)*.9)+"px";