我的页面上有一个导航栏和 4 个图表，如下图所示。
我的目标是在页面上显示所有 4 个图表，而不在不同的屏幕高度上显示滚动。我的代码如下所示:
<div className="container">
<div className="graph">
<Chart /> //graph 1
<Chart /> //graph 2
</div>
<div className="graph">
<Chart /> //graph 1
<Chart /> //graph 2
</div>
</div>
我尝试将 90vh 放入容器中并将高度固定为 <Chart />组件。
最佳答案
这是您要找的吗？
:root {
--header-height: 45px;
}
html, body {
height: 100%;
min-height: 100%;
}
body { padding:0; margin: 0 }
#header {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--header-height);
background-color: red;
}
#container {
position: fixed;
top: var(--header-height);
left: 0; bottom: 0; right: 0;
}
.chart {
position: absolute;
}
.chart.topLeft {
left: 0; right: 50%;
top: 0; bottom: 50%;
background-color: blue;
}
.chart.topRight {
left: 50%; right: 0;
top: 0; bottom: 50%;
background-color: green;
}
.chart.bottomLeft {
left: 0; right: 50%;
top: 50%; bottom: 0;
background-color: yellow;
}
.chart.bottomRight {
left: 50%; right: 0;
top: 50%; bottom: 0;
background-color: orange;
}<html>
<body>
<div id="header">
</div>
<div id="container">
<div class="chart topLeft"></div>
<div class="chart topRight"></div>
<div class="chart bottomLeft"></div>
<div class="chart bottomRight"></div>
</div>
</body>
</html>关于html - 如何根据CSS中高度的变化设置元素比例？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75907755/