为什么不能这个textarea假设其在Chrome中的父母的全部高度？ [英] Why can't this textarea assume the full height of its parent in Chrome?

问题描述

请考虑以下页面，其中显示了一行文字，其下方有一个< textarea> 字样。

  * {box-sizing：border-box;} html，body {height：100％; margin：0;}。outer {background-color：#eee;显示：flex; flex-direction：column;身高：100％ padding：10px;}展开{flex-grow：1;} textarea {height：100％; width：100％;}  

< div class =外> < p为H.文本的好的小墙壁。 < / p为H. < div class =expand> < TextArea>< / textarea的> < / div>< / div>

就是让textarea占据文本行下的页面剩余高度。使用flexbox，我可以使 .expand 元素占据页面的剩余高度。然而，尽管在textarea上设置了 height：100％; ，它却拒绝占用其父母的全部高度。

<为什么不能正常工作，我怎样才能让textarea填满它的父项？ 解决方案

  * {box-sizing：border-box;} html，body {height：100％; margin：0;}。outer {background-color：#eee;显示：flex; flex-direction：column;身高：100％ padding：10px;}。展开{flex：1;} textarea {height：100％; width：100％;}  

< div class =外> < p为H.文本的好的小墙壁。 < / p为H. < div class =expand> < TextArea>< / textarea的> < / div>< / div>

$ b

  .expand {
 flex：1; 
} 
  




Consider the following page, which displays a line of text with a <textarea> underneath it.

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.outer {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.expand {
  flex-grow: 1;
}

textarea {
  height: 100%;
  width: 100%;
}

<div class="outer">
  <p>
    Nice little wall of text.
  </p>
  <div class="expand">
    <textarea></textarea>
  </div>
</div>

The intended behavior is to have the textarea occupy the remaining height of the page underneath the line of text. Using flexbox, I can make the .expand element occupy the remaining height of the page. However, despite having height: 100%; set on the textarea it refuses to occupy the full height of its parent.

Why isn't this working and how can I make the textarea fill its parent?

解决方案

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

.outer {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.expand {
  flex: 1;
}

textarea {
  height: 100%;
  width: 100%;
}

<div class="outer">
  <p>
    Nice little wall of text.
  </p>
  <div class="expand">
    <textarea></textarea>
  </div>
</div>

.expand {
  flex: 1;
}

这篇关于为什么不能这个textarea假设其在Chrome中的父母的全部高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！