打开控制台时，绝对位置div超出窗口[关闭]答案

【问题标题】：Absolute position div goes out of window when opening console [closed]打开控制台时，绝对位置div超出窗口[关闭]
【发布时间】：2017-10-19 17:31:15
【问题描述】：

在 div 或 wrapper 下有一个 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 答案。谢谢！

【问题讨论】：

没有什么可修复的，因为它的行为正确。您对此有何担忧？有人会以 100 像素的高度查看您的网站吗？当窗口高度小于内容高度时，您的 div 将消失，无论控制台窗口如何，它都会这样做，如果您只是调整浏览器的大小，您可以做同样的事情
可以将div的内容制作成auto-resize according to window size

标签： html css

【解决方案1】：

你的问题在这里：

top: 50%;
left: 50%;

这些是相对单位。要么将它们更改为绝对大小，要么让父级具有静态大小。

【讨论】：

CSS 用于垂直和水平居中 div
我知道，有什么问题吗？ 要么将它们更改为绝对大小，要么让父级具有静态大小。 这只是意味着第二个选项对他来说可能更好
知道了！谢谢！

【解决方案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>

【讨论】：