https://jsfiddle.net/7vpn20oh/1/:这个问题似乎是由于我的代码顶部没有<!DOCTYPE html>
引起的,但是现在添加这个代码打破了整个布局:Edit
在我的网站上,我在表单中使用<input type="text" id="inputMessage">
创建了一个小文本输入域。然后,我使用CSS并执行了以下操作:
#inputMessage {
display: inline-block;
width: calc(100% - 50px);
height: 100%;
}
哪种方式有效。我甚至可以单击文本框,它仍然可以正常工作。但就在我开始打字的那一刻,文本框变得很大。这里是它的Gif:https://i.gyazo.com/cb8752209d92b75260a1f149c5721fbb.gif
发布于 2019-06-11 22:41:19
我通过将body选择器中的height: 100%
更改为height: 100vh
修复了提供的jsfiddle,现在一切都像预期的那样工作(布局没有破坏,输入没有增长)。
我认为#inputMessage元素的height: 100%
往好里说是无用的,往坏里说是有害的。当我在我的代码中删除它时,并没有什么不同。
(我还对#inputMessage和#inputButton的宽度做了一些小改动)
https://stackoverflow.com/questions/56546028
复制相似问题