打开控制台时，绝对位置div会离开窗口

Question

在div或包装下有一个div。子div是绝对定位的，可以水平和垂直对齐。但问题是，当我打开控制台并调整大小时，即向上移动div离开窗口。我想解决这个问题。请帮我解决这个问题。我希望div留在它的位置（不是位置：固定）。

代码：

div.content{
  background-color: #F44336;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class = "wrapper">
  <div class = "content" style = "font-size: 48px;">
    Hi This is cool man! This is amazing.<br />
    Hi This is cool man! This is amazing.<br />
    Hi This is cool man! This is amazing.<br />
  </div>
</div>

请帮忙！是的，请告诉我是否可以通过纯JavaScript。我不喜欢jQuery的答案。谢谢！

Answer 1

你的问题在于：

top: 50%;
left: 50%;

这些是相对单位。将它们更改为绝对值或让父项具有静态大小。

Answer 2

您可以尝试设置相对于视口高度的最大高度。通过应用max-height: 90vh（以及可能overflow-y:auto），容器本身永远不会高于视口高度的90％。

div.content{
  background-color: #F44336;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  max-height: 90vh;
  overflow-y: auto;
}

<div class = "wrapper">
  <div class = "content" style = "font-size: 48px;">
    Hi This is cool man! This is amazing.<br />
    Hi This is cool man! This is amazing.<br />
    Hi This is cool man! This is amazing.<br />
  </div>
</div>