Question

我有这个HTML：

<div>
  <span></span>
  <textarea></textarea>
</div>

Span可以占用一行或多行（取决于它具有的文本和Div的大小）。我希望Textarea能够占据div中的所有高度。

请不要jQuery。

https://jsfiddle.net/ntme8Lt4/

Answer 1

CSS / style标签只是max-height：100％;和宽度：100％;

如果div的大小设置为其父容器的百分比或常量值（如900px），则会保持div的大小不变。

由于跨度的大小未知，因此请不要指定，以便自动调整内容大小。

Answer 2

这里有一个循环问题 - div的高度（通常）由其组件的大小决定。你需要一些东西来打破圆圈并确定div或文本区域的高度。

Answer 3

您可以使用offsetHeight来获取不同元素的高度，并从那里只计算容器 - span元素以查找剩余元素。

document.querySelector('textarea').style.height = (document.querySelector('div').offsetHeight-document.querySelector('span').offsetHeight)+'px'

http://jsfiddle.net/rhbritton/4eck8dua/1/

Answer 4

如果您只是想使用纯CSS并且不需要表等，那么您可以尝试这种方法。

HTML：

<div>
   <span>
       Hello<br>
       Hello<br>
       Hello
   </span>
   <textarea></textarea>
</div>

CSS：

div {
    width: 400px;
    height: 300px;
    overflow: hidden;
    border: 1px solid red;
}
span {
    width: 100%;
    display: block;
    background-color: red;
}
textarea {      
    width: 100%;
    height: 100%;
    background-color: blue;
}

JSFiddle

请告诉我这是否适合您。

Answer 5

如果您愿意使用纯JS，可以使用clientWidth和clientHeight：

以下是fiddle

function test()
{ 
    var div = document.getElementById("testDiv");
    var span = document.getElementById("testSpan");
    var textArea = document.getElementById("testTextArea");
    var height = div.clientHeight - span.clientHeight;
    textArea.style.height = (height - 5) + "px";
    textArea.style.width = (div.clientWidth - 5) + "px";
}

test();

Reference

Answer 6

你可以使用flex

div
{
    display: flex;
    flex-direction: column; /*layout top to bottom*/
    height: 300px;
    width: 400px;
    border: 1px solid red;    
}
span
{
    display: block;
    background-color: red;
}
textarea
{    
    background-color: blue;
    height: 100%;
    width: 100%;
    flex-grow: 1; /*take up remaining space in flex container*/
}
}

https://jsfiddle.net/ntme8Lt4/13/

Answer 7

感谢＆＃34;可能重复＆＃34;我提出了这个解决方案：

<div>
  <span>Hello<br>World</span>
    <b><textarea></textarea></b>
</div>

div
{
    height: 300px;
    width: 400px;
    border: 1px solid red;   
    display: table;
}
span
{
    display: block;
    background-color: red;
}
b
{    

    height: 100%;
    width: 100%;
    display: table-row;
}
textarea
{
    height: 100%;
    width: 100%;
    background-color: blue;    
}

https://jsfiddle.net/c42go079/

如何让div占据所有高度？

7 个答案: