Question

我有一个div，其中包含另一个孩子div。在该子级div中有一个h1标签和一个textarea标签。我希望h1标签和textarea适应父div的高度，但好像textarea被推离父div 。

我尝试对box-sizing: border-box;使用textarea来确保它停留在父div内，尽管它适用于宽度，但不适用于高度。

我还能够通过使textarea的高度为父87%的{{1}}来提供临时修复程序，但是如果我在浏览器中缩小，最终{ {1}}在父div上流血。我还尝试过将textarea放入包含的div中，这可以防止流血，但是我看不到m overflow:hidden的底部。

理想情况下，我希望div的高度不占用textarea标记未占用的textarea的其余部分。我还希望完全不要在包含的div上流血h1，这甚至在我执行textarea时就发生了，但我还是想避免使用它，因为我想要溢出成为div，以解决自动换行不足的问题。

如果您查看代码段，则会看到overflow:hidden是如何从包含的auto垂直溢出的。

编辑

我已经考虑过使用flexbox，但是我打算将div的左右边框都可拖动，但是我不确定是否可以使用flexbox，同时允许textarea根据边框拖动轻松调整大小。我不确定这是否可行，但我愿意接受建议！

div

div

Answer 1

您可以大大简化html和css并使用flexbox。

.sectionContainer // acts as a flexbox.

.sectionContainer>.box-title{
  flex: 0 0 auto; // title can not grow or shrink and has the regular height
}
.sectionContainer>.innerBox{
  flex: 1 1 auto; // textarea can grow or based on the leftover area
}

我对示例进行了动画处理，以显示更改.sectionContainer的宽度或高度具有所需的效果。

.sectionContainer{
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  height: 300px;
  width: 100%;
  animation: animateWidth 3s infinite;
  position: relative;
}

.sectionContainer>.box-title{
  flex: 0 0 auto;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.sectionContainer>.innerBox{
  flex: 1 1 auto;
  width: 100%;
  padding: 5px;
  box-sizing:border-box;
}
@keyframes animateWidth {
  0%{
    width: 100%;
  }
  25%{
    width: 50%;
  }
  50% {
    width: 100%;
    height: 300px;
  }
  75% {
    height: 150px;
  }
  100% {
    height: 300px;
  }
}

<div class="sectionContainer">
   <h2  class="box-title">JavaScript</h2>
   <textarea class="innerBox"></textarea>
</div>

Answer 2

使用flexbox，但不要将textarea设置为flex项目，以避免调整大小。考虑一下它周围的包装纸。

.sectionContainer{
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  height: 300px;
}

.sectionContainer>.box-title{
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.sectionContainer>.innerBox{
  flex-shrink:0;
  flex-grow:1;
}
.sectionContainer>.innerBox textarea {
  height:100%;
  width:100%;
  box-sizing:border-box;
}

<div class="sectionContainer">
   <h2  class="box-title">JavaScript</h2>
   <div class="innerBox"><textarea ></textarea></div>
</div>

textarea高度溢出了父容器

2 个答案: