Question

以下是我尝试的内容：

<textarea name='text' spellcheck = "true" style="height: 4em; width: 80%;" id="wider"></textarea>

我也尝试用px或％设置高度，两者都不起作用。我还在我的css文件中尝试了以下内容（以及在css中将高度设置为％，px或em，这也没有用）：

#wider{
    width: 80%;
    height: auto;
}

我可以使用内联样式命令或css调整宽度没问题。为什么高度不同，我还能尝试什么？

感谢您的任何建议。

更新：我还尝试在内联和CSS样式中设置rows属性。据我所知，内联将取代CSS。我只想要一个人工作。此时，宽度属性始终会调整以反映我的更改，但高度始终保持不变。还有什么我应该看的吗？再次感谢！

Answer 1

在这种情况下，结果发现有一个＆＃34; min-height＆＃34;以表格形式藏在textareas的财产。显然，高度的内联样式设置不会覆盖CSS文件中的min-height属性。

Answer 2

如果您使用的是内联样式标记，则优先于CSS样式。

height属性按预期工作： JSfiddle here.

如果您有预期的使用行数，也可以使用textarea上的rows属性设置高度。

<textarea name='text' spellcheck="true" id="wider" rows="5"></textarea>

Answer 3

一旦某些父元素改变其自身的高度（例如高度），您就可以使用javascript来调整textarea的尺寸。您将要调用functios（ES6 Javascript版本）：

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

textarea调整宽度但不调整高度，为什么？

3 个答案: