logo标签列表

无法使文本区域占据剩余 DIV 空间的高度达到 100%

htmlcsstextarea
3
我需要您的帮助。由于某种原因，似乎我的文本区域不想合作。我想做的是将其高度扩展到下面红色箭头所示的DIV剩余空间的100％。但也许我做错了什么。也许有一双新鲜的眼睛会很有帮助。

enter image description here

这里是相关的HTML和CSS：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
.content {
    width: 500px;
    height: 500px;
    border: 1px solid blue;
}
textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
</style>


</head>

<body>

<div class="content">

    <div>text here</div>

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

    <div><input type="button" value="Click Me"/></div>


</div>


</body>

</html>
请查看此问题的答案以了解如何定位三行。链接 - Quantumplate
4个回答
2
问题在于你将的包装器并使用flexbox：

.content { display: flex; flex-direction: column; }
textarea { flex-grow: 1; }


.content {
  width: 500px;
  height: 500px;
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
}
textarea {
  flex-grow: 1;
}
<div class="content">
  <div>text here</div>
  <textarea></textarea>
  <div><input type="button" value="Click Me" /></div>
</div>

1
将textarea从div中取出并使用flexbox：https://jsfiddle.net/Lqtuprpu/ 
<div class="content">
    <div>text here</div>
    <textarea></textarea>
    <div><input type="button" value="Click Me"/></div>
</div>


.content {
    width: 500px;
    height: 500px;
    border: 1px solid blue;
    display: flex;
    flex-direction: column;
}
textarea {
    flex-basis: 100%;
    flex-shrink: 1;
    width: 100%;
    box-sizing: border-box;
}

了解更多有关Flexbox使用的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1

您可以摆脱不必要的div，像这样操作：

<!DOCTYPE html>

<html>

<head>

  <style type="text/css">
    .content {
      width: 500px;
      height: 500px;
      border: 1px solid blue;
    }
    
    textarea {
      width: 100%;
      height: calc(100% - 45px);
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="content">
    <div>text here</div>
    <textarea></textarea>
    <div>
      <input type="button" value="Click Me" />
    </div>
  </div>
</body>

</html>

有很多种方法可以“剥皮猫”。但是这个例子似乎也满足在IE中实现此功能的需求，因此这个答案将获胜。感谢大家的奉献和支持！ - BobbyJones
0

有一个简单而巧妙的技巧。将 textarea 的位置设置为 absolute，同时将其顶部和左侧设置为 0，然后将包装器 div 的位置设置为 relative。就这样。

在这种情况下，您不需要强制为包装器设置特定的像素高度。

.content {
    width: 500px;
    height: 500px;
    border: 1px solid blue;
}
textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}
.wrapper{
    position: relative;
    height: calc(100% - 40px);
}
<div class="content">

    <div style="height: 20px">text here</div>

    <div class="wrapper">
        <textarea></textarea>
    </div>

    <div style="height: 20px"><input type="button" value="Click Me"/></div>
</div>

或文本区域。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接