CSS：调整大小时高度不正确

Question

我已经很久没遇到这个问题了。每当我调整窗口大小时，CSS的行为都非常奇怪。我会给你看图片，因为我很难解释。

应该如何：

不应该如何：

即使我使用了procentage height而不是像素，但它还是错了。

我在这里链接了源代码，在调整大小窗口时会出现同样的问题：

jsfiddle.net/nxa747ca /

Answer 1

由于您的班级有position: absolute和<div class="chat-messages"></div> <input type="text" class="chat-name" placeholder="Type your message">，因此无效。

首先要修复你的html的顺序：

position: absolute;

在你的css上移除chat-messages上的position: fixed;和.chat-name上的position: relative;，它们应该只是默认 if (typeVal === containerVal) { container.classList.toggle('active') } else { container.classList.remove('active') }