Question

我需要你的帮助。由于某种原因，我的文本似乎不想合作。我想做的是按照下面描述的红色箭头将其高度扩展到DIV中留下的空间的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

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

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脱离流量，从而避免高度的递归定义。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

但最好删除textarea的包装并使用flexbox：

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

＆＃13;

.content {
  width: 500px;
  height: 500px;
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
}
textarea {
  flex-grow: 1;
}

＆＃13;

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

＆＃13;

无法让textarea成为剩余DIV空间的100％高度

3 个答案: