Question 45415 in Html Question posted in
Some basic documentation can be found here.

How to alter my CSS to ensure that the textarea height always matches the height of its div container? – Html

I have a textarea inside a div, and I wish for the text area height to match the height of the div container.

Currently, the width fits perfectly, however the textbox (which begins empty) only fills about 20% of the div height.

And when an ajax call grabs some text and populates the textarea, the textarea height remains at about 20% of the div and provides a scroll bar.

How can I alter my CSS to ensure that the textarea height always matches the height of its div container?

#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>
Tags:

5

Answers


  1. 0

    try keeping the min-height of the textarea as 100% or nearby or try using
    object-fit: contain(or cover) on your text area

    Login or Signup to reply.
  2. 0

    You can try this

    #answerBox {
  height: 100%;
  resize: none;
}
    Login or Signup to reply.
  3. 0

    Give specific height for #answerBoxDiv parent div. So you will get appropriate height for this div.

    <div class="parent-div" style="height: 100%;">
    <div id="answerBoxDiv">
        <textarea id="answerBox"></textarea>
    </div>
</div>
    Login or Signup to reply.
  4. 0

    You need to explicitly set a height of the parent container (whether that is in px or rem etc) – that way the height: 100% of the textarea will fill to the container.

    The expand on text content cannot be done with simple css – you need js to determine the heaight of the content and adjust the parent container accordingly.

    The only way tyou can keep height: 100% on the parent container is its ancestor has a height set (eg 100vh) – that way the browser can determine the height of each DOM element and size the text area accrodingly.

    UPDATE – I have added a js function to automatiucally increae the height of the parent container on the input. (the textarea autoincreases in height since it is 100% of the parentThis will need massaging – but when you type into the textarea the height will auto expand.

    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>
    Login or Signup to reply.
  5. 0

    Percentage height does not work with a min-height parent, you would either need to give your parent a height or you could use 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search