问HTML输入在开始键入时变大，因为高度设置为100%
EN

Stack Overflow用户

提问于 2019-06-11 22:29:19

回答 1查看 54关注 0票数 -1

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的宽度做了一些小改动)

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56546028

复制

相似问题

问HTML输入在开始键入时变大，因为高度设置为100%EN