无法使文本区域成为剩余高度的 100% DIV space

Question

我需要你的帮助。出于某种原因，我的文本区域似乎不想合作。我想做的是按照下面描述的红色箭头将其高度扩展到 DIV 中剩余的 space 的 100%。但也许我做错了什么。或许换一双眼睛会有很大帮助。

这里是有问题的 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>

Answer 1

从 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/

Answer 2

您可以删除不必要的 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>

Answer 3

问题是您将 textarea 的高度设置为其父项的 100%。但是它的父级有 height: auto，所以它的高度取决于它的内容。那是一个递归定义。

您可以通过为该父级设置明确的高度来解决它，例如100%。但是 .content 的内容的高度总和将超过 100%.

如果您知道 .content 的其他内容的高度，您可以使用 calc()。

但如果您想要流畅的布局，您应该可以 CSS 个表格。

.content { display: table }
.content > div { display: table-row }
.content > div:nth-child(2) { height: 100% }

此外，某些浏览器可能需要绝对定位才能使 textarea 脱离流程，从而避免递归定义高度。

.content {
  width: 500px;
  height: 500px;
  border: 1px solid blue;
  display: table;
  table-layout: fix
}
.content > div {
  display: table-row;
  position: relative;
}
.content > div:nth-child(2) {
  height: 100%; /* As much as possible */
}
textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

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

但最好去掉 textarea 的包装并使用 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>

Answer 4

有一个简单而甜蜜的技巧。设置 textarea position 为 absolute 而 top 和 left 为 0，然后设置 wrapper div position 为 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>

或文本区域。

无法使文本区域成为剩余高度的 100% DIV space

Cannot get textarea to be 100% height of remaining DIV space

html

css

textarea