html中分4个div

如何使用css和js将页面分4个div上下平分，左大右小，且跟随窗口和屏幕大小缩放。

.box{
height:100%;
height:100%}

.left_one{
}
.left_two{
}
.right_one{
}
.right_two{
}


<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box{
                background-color: #F2F2F2;
                height: 100vh;
                display: grid;
                grid-template-columns: 3fr 2fr;
                grid-template-rows: 1fr 1fr;
            }

            .box>div {
                background-color: #D9D9D9;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>


.box{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

搞定，其他的都不用动

不知道你这个问题是否已经解决, 如果还没有解决的话:

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7521882
除此之外, 这篇博客: HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码中的 六、更多HTML期末大作业文章 部分也许能够解决你的问题。

以下回答由chatgpt基于相关博客总结生成:

答案：

你可以使用Flexbox布局来实现页面的分割和自动缩放效果。以下是修改后的代码：

<!DOCTYPE html>
<html>
<head>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .box {
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .left_one {
    flex: 2;
    background-color: red;
  }

  .left_two {
    flex: 2;
    background-color: blue;
  }

  .right_one {
    flex: 1;
    background-color: yellow;
  }

  .right_two {
    flex: 1;
    background-color: green;
  }
</style>
</head>
<body>
  <div class="box">
    <div class="left_one"></div>
    <div class="left_two"></div>
    <div class="right_one"></div>
    <div class="right_two"></div>
  </div>

<script>
window.addEventListener('resize', function() {
  var box = document.querySelector('.box');
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  // 计算左侧和右侧的宽度
  var leftWidth = windowWidth * 0.67; // 左侧占2/3宽度
  var rightWidth = windowWidth * 0.33; // 右侧占1/3宽度

  // 设置左侧和右侧的宽度和高度
  box.style.width = windowWidth + 'px';
  box.style.height = windowHeight + 'px';

  var leftOne = document.querySelector('.left_one');
  var leftTwo = document.querySelector('.left_two');
  var rightOne = document.querySelector('.right_one');
  var rightTwo = document.querySelector('.right_two');

  leftOne.style.width = leftWidth + 'px';
  leftTwo.style.width = leftWidth + 'px';
  rightOne.style.width = rightWidth + 'px';
  rightTwo.style.width = rightWidth + 'px';
});
</script>

</body>
</html>

将上述代码保存为一个HTML文件，然后在浏览器中打开，你就可以看到页面被分为4个div，并且能够根据窗口和屏幕大小自动缩放。上面的div会占据页面的一半高度，下面的div也会占据页面的一半高度。左侧的div比右侧的div宽。

JavaScript部分监听了窗口的resize事件，当窗口大小发生变化时，根据新的窗口大小计算出左侧和右侧的宽度，并动态地设置每个div的宽度。通过将宽度设置为百分比，可以实现自动缩放的效果。

请注意，这里的CSS代码只是为了演示和说明，你可以根据实际需求来自定义样式。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^