As I already wrote in the commentary, you can use javascript. If I understand correctly, then in the code I get the height in pixels for the current screen size, provided that the height is set to 90vh. Further, the blocks (#box1, #box2) are assigned this height.
I don’t know, why you didn’t assign a height of 90vh to the #container div. And instead they assigned each block separately. Perhaps you need it more. And according to your css, I made the code in javascript.
window.onload = function() {
let box1 = document.querySelector('#box1');
let box2 = document.querySelector('#box2');
box1.style.height = box1.offsetHeight + 'px';
box2.style.height = box2.offsetHeight + 'px';
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-size: 1vw;
}
body {
height: 100%;
}
#container {
display: flex;
width: 100%;
}
#box1 {
border: 1px solid black;
width: 50%;
height: 90vh;
background: lightblue;
}
#box2 {
border: 1px solid black;
width: 50%;
height: 90vh;
background: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "container">
<div id = "box1"></div>
<div id = "box2"></div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
