html - CSS:调整大小时高度不正确

Question

这个问题困扰我好久了。每当我调整窗口大小时，CSS 的行为真的很奇怪。我会给你看图片，因为我很难解释。

它应该如何:

它不应该是这样的:

即使我使用百分比高度而不是像素，它也会出错。

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

jsfiddle.net/nxa747ca/

Answer 1

它不起作用，因为你有 position:fixed和 position: absolute在你的课上。

首先要确定 html 的顺序:

<div class="chat-messages"></div> <input type="text" class="chat-name" placeholder="Type your message">

在你的 css 上删除 position: absolute;在 chat-messages和 position: fixed;在 .chat-name它们应该只是默认值 position: relative;