Question

编辑：我忘了提到我也把它放在绝对位置。绝对抱歉。内容中的修改采用粗体。

我有这个容器用于缩放其内容。我需要均匀地缩小范围，并意识到我可以使用transform CSS属性以方便我。

结果很好，内容被缩放并放置得很好。问题是，我在body元素上溢出，由容器元素引起。它不会越过窗口边界，不会在其变换后，并且定位为绝对。但是，出于某种原因，我的浏览器（Edge 16）决定为元素容纳空间，就像它没有被转换一样。

.container {
  position: absolute;
  width: 10000px; height: 10000px;
  border: solid 100px red;
  transform-origin: top left;
  transform: scale(0.01);
}

.orange-box {
  width: 5000px; height: 2000px;
  background-color: orange;
}

<div class='container'>
  <div class='orange-box'>
</div>

我在Chrome 64上尝试了几次，我的身体上没有溢出。我确实想要使用它，我希望得到Edge支持。

有没有办法解决这个错误/问题？或许有一种方法可以防止特定元素导致溢出而不完全隐藏它们？我也不想在身体上overflow: none，因为身体可能合法地溢出。

Answer 1

我不认为它是Edge中的一个错误。至少，我在Chrome中看到滚动条。

可能是你可以绕过它将div放在左边和顶部（不会伸展身体边界）

＆＃13;

.container {
    width: 10000px;
    height: 10000px;
    border: solid 100px red;
    transform: scale(0.01);
    top: -10095px;
    position: absolute;
    left: -10095px;
    transform-origin: right bottom;
}

.orange-box {
  width: 5000px; height: 2000px;
  background-color: orange;
}

＆＃13;

<div class='container'>
  <div class='orange-box'>
</div>

＆＃13;

Answer 2

我将其全部封装在另一个容器中，将其定位为relative，并使用translate(0)对其进行转换。转换什么都不做，但它与none不同，这就是我需要让孩子定位为fixed以尊重其容器的位置：请参阅MDN/position/fixed

然后，我将我们以前的容器的位置更改为fixed，它执行了absolute无法在Edge 16上执行的操作，并从文档流中删除了容器。

.container-container {
  position: relative;
  top: 50px;
  transform: translate(0);
}

.container {
  position: fixed;
  width: 10000px; height: 10000px;
  border: solid 100px red;
  transform-origin: top left;
  transform: scale(0.01);
}

.orange-box {
  width: 5000px; height: 2000px;
  background-color: orange;
}

<div class='container-container'>
  <div class='container'>
    <div class='orange-box'>
  </div>
</div>

由于translate(0)转换，我将容器容器放置在远离左上方的位置，以显示固定的子容器随之移动。

但是，我没有使用它。我改为将容器容器设置为通过CSS将其overflow设为hidden，并像以前一样保留所有内容。这只有在容器容器的宽度和高度设置为包含在体内时才能解决，这在我的应用程序中就是这种情况。

容器转换为适合，定位绝对，仍然导致溢出，好像没有转换

2 个答案: