如何实现无滚动条的全屏CSS Grid布局？求跨设备兼容方案

我编写了如下CSS代码：

body, html {
  height: 100%;
  margin: 0;
}
    
.grid-container {
  display: grid;
  grid-template-rows: 30% 70%;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%
}

.grid-container button {
  padding: 10px;
}

.console {
  grid-column: span 2;
  color: #F12;
  background-color: #123;
  height: 98.5%
}

对应的HTML代码：

<html>
<body>
    <div class="grid-container">
      <button>Button 1</button>
      <button>Button 2</button>
      <div class="console">Textoutput here...</div>
    </div>
</body>
</html>

我期望实现顶部两个按钮占30%高度、下方文本容器占70%高度的全屏无滚动条布局，当前代码在Firefox和Edge中可实现，但存在问题：将.console的height设为100%会因gap出现滚动条，用calc(100% - 10px)在Windows有效但Linux失效；改用30vh/70vh的行高后，Linux表现更好但.console的高度调整方案不适用，请问有更优的跨设备兼容方案吗？

核心问题是之前的行高计算未考虑gap的存在，导致总高度超出容器引发滚动条。以下是跨设备兼容的最优方案：

1. 用**动态视口高度单位dvh**替代%或vh：dvh自动适配不同设备的视口变化（比如移动端地址栏收展），兼容性更强。
2. 用fr单位分配行高：fr会在扣除gap后自动分配剩余空间，无需手动写calc，避免跨平台计算差异。
3. 移除子元素固定高度：让Grid单元格自动填充子元素，无需给.console设置height。

修改后的CSS代码：

body, html {
  height: 100dvh; /* 适配动态视口，替代100%/100vh */
  margin: 0;
  overflow: hidden; /* 强制隐藏滚动条 */
}

.grid-container {
  display: grid;
  grid-template-rows: 3fr 7fr; /* 按3:7分配扣除gap后的空间 */
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 确保内边距/边框不增加容器尺寸 */
}

.grid-container button {
  padding: 10px;
  margin: 0; /* 清除按钮默认边距 */
}

.console {
  grid-column: span 2;
  color: #F12;
  background-color: #123;
  /* 无需设置height，自动填满Grid单元格 */
}

方案说明： #

• 100dvh：解决传统视口单位在移动端的适配问题，当前主流浏览器（Chrome、Firefox、Edge、Safari）均已支持。
• 3fr 7fr：Grid会先从容器高度中扣除10px的行间距，再将剩余空间按3:7比例分配给两行，总高度刚好等于容器高度，不会溢出。
• 移除.console的height：Grid单元格自动拉伸子元素填满自身高度，避免手动计算带来的兼容性问题。
• overflow: hidden：确保即使出现意外溢出，也不会显示滚动条，严格保持全屏无滚动效果。

此修改后，布局在Windows、Linux及移动端均能保持一致的全屏无滚动效果，完全满足需求。

内容的提问来源于stack exchange，提问作者MaKaNu