跨浏览器高度 100%（变换比例<1）

我似乎无法找到一种方法使子容器的高度为父容器的 100%，并且只能看到滚动条。相反，我们看到高度的空白量增加了一倍。

这个问题与Javascript 放大/缩小到鼠标 x/y 坐标 https://stackoverflow.com/questions/57262208/javascript-zoom-in-out-to-mouse-x-y-coordinates

如果我们没有overflow设置在主容器中，然后在

• Chrome 工作正常
• Safari = 可以，但我们没有 x 轴滚动条
• Firefox = 空格问题

如果我们设置overflow: auto or scroll then in

• Chrome = 空白问题
• Safari = 我们有滚动条，但仍然存在空白问题
• Firefox = 空格问题

我们需要溢出属性来使 safari 显示滚动条，这会在所有浏览器上添加空白问题。

JSfiddle 链接 -https://jsfiddle.net/catalinu/jLfrbzwp/4/ https://jsfiddle.net/catalinu/jLfrbzwp/4/

body {
  margin: 0;
}

.main {
	width: 100%; /* percentage fixes the X axis white space */
	height: 100vh; /* i would love to use 100% but it doesn't work for height */
	overflow: scroll; /* needed for safari to show the x axis scrollbar */
}

.main .section {
	width: 2000px;
	height: 2000px;
	background-color: #333;
	transform-origin: 0 0;
  transform: scale(0.5, 0.5);
}

<main class="main">
  <section class="section"></section>
</main>