如何修改我的CSS以确保文本区域的高度总是与其div容器的高度相匹配?

lg40wkob  于 2023-02-17  发布在  其他
关注(0)|答案(7)|浏览(204)

我在一个div中有一个文本区域,我希望文本区域的高度与div容器的高度相匹配。
目前,宽度非常合适,但是文本框(开始为空)只占div高度的20%左右。
当ajax调用抓取一些文本并填充textarea时,textarea高度保持在div的20%左右,并提供滚动条。
我怎样才能改变我的CSS来确保文本区域的高度总是匹配它的div容器的高度?

#answerBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 5px auto;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBoxDiv {
  width: 90%;
  min-height: 50%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}
<div id="answerBoxDiv">
  <textarea id="answerBox"></textarea>
</div>
hk8txs48

hk8txs481#

您需要显式地设置父容器的高度(无论是px还是rem等)-这样的高度:100%的文本区域将填充到容器中。
对文本内容的展开不能用简单的CSS来完成--你需要JS来确定内容的高度,并相应地调整父容器。
保持身高的唯一方法:100%在父容器上是它的祖先有一个高度设置(例如100 vh)-这样浏览器可以确定每个DOM元素的高度和大小的文本区域递增。

UPDATE -我已经添加了一个js函数来自动增加输入的父容器的高度。(文本区域的高度自动增加,因为它是父容器的100%。这将需要按摩-但当你在文本区域中键入内容时,高度将自动扩展。

function setHeight(element) {
  const container = document.getElementById("answerBoxDiv");
  const height = element.scrollHeight;
  if(height > 100) {
    container.style.height = (element.scrollHeight)+"px";
    }
}
#answerBoxDiv {
  width: 90%;
  height: 100px; **// this is needed - but can be in px / rem / vh or other but NOT % unless its parent has its height set.**
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBox {
  width: 100%;
  height: 100%; 
  box-sizing: border-box;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
  resize: vertical;
  overflow: hidden
}
<div id="answerBoxDiv">
   <textarea id="answerBox" oninput="setHeight(this)"></textarea>
</div>
wnrlj8wa

wnrlj8wa2#

您可以使用CSS高度:100%;属性,使其填充其父容器#answerBoxDiv的整个高度。此外,您可以从#answerBoxDiv中删除min-height属性,以确保容器的高度始终等于其内容的高度。
以下是更新的CSS:

#answerBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;/*keep it zero*/
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBoxDiv {
  width: 90%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 0px;/*keep it zero*/
  font-size: 10px;
  text-align: left;
  position: relative;
}

以及更新的HTML:

<div id="answerBoxDiv">
  <textarea id="answerBox"></textarea>
</div>
hgqdbh6s

hgqdbh6s3#

百分比高度不适用于最小高度父对象,您需要为父对象指定一个高度,或者可以使用flex:

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

#answerBox {
  flex-grow:1;
  width: 100%;
  box-sizing: border-box;
  margin: 5px auto;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
}

#answerBoxDiv {
  width: 90%;
  min-height: 50%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}
<div id="answerBoxDiv">
  <textarea id="answerBox"></textarea>
</div>
o2g1uqev

o2g1uqev4#

你可以试试这个

#answerBox {
  height: 100%;
  resize: none;
}
vvppvyoh

vvppvyoh5#

尝试保持文本区域的最小高度为100%或附近或尝试在文本区域使用object-fit: contain(or cover)

wf82jlnq

wf82jlnq6#

为#answerBoxDiv父div给予特定的height。这样您将获得此div的适当高度。

<div class="parent-div" style="height: 100%;">
    <div id="answerBoxDiv">
        <textarea id="answerBox"></textarea>
    </div>
</div>
olqngx59

olqngx597#

#answerBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 5px;
  font-size: 10px;
  text-align: left;
  resize: none;
  border: none;
}

#answerBoxDiv {
  width: 90%;
  min-height: 50%;
  margin: 5px auto;
  border: 4px solid #00bfb6;
  padding: 0;
  position: relative;
}

相关问题