打开控制台时绝对位置div不在窗口中

问题描述：

div或包装下有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的答案。谢谢！

没有什么解决，因为它是正确的行为。你对此有何顾虑？有人会看到你的网站的高度为100px？当窗口高度小于内容高度时，您的div将消失，无论控制台窗口如何，它都会执行此操作，如果您只是调整浏览器的大小，则可以做同样的事情 – Huangism

您可以将div的内容设置为[根据自动调整大小到窗口大小]（https://*.com/a/36121945/380331） –

答

你的问题就在这里：

top: 50%; 
left: 50%;

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

css是有垂直和水平中心的div – Huangism

我知道，那么问题是什么？ _要么将它们改为绝对的，要么让父母具有一个静态的大小。这只意味着第二个选项对他来说可能更好。 – SourceOverflow

明白！谢谢！ – Sanjay

答

您可以尝试设置相对于视口高度的最大高度。通过应用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>

打开控制台时绝对位置div不在窗口中

相关推荐