CODEWITHSUNDEEP
css
Jack M
Jack M

Reputation: 6025

Make a <textarea> fill remaining height

I learned from this question how to make an HTML element fill the remaining height of a container. But it doesn't seem to be working with <textarea>. This Fiddle compares the effects of display: table-row on a <textarea> and a <div>:

http://jsfiddle.net/b4Tt8/2/

Why the difference, and how can I get the appropriate effect on the textarea?

Upvotes: 22

Views: 33900

Answers (3)

bolloga
bolloga

Reputation: 345

You can use flexbox to set your textarea height according to its parent.

HTML

<div class="container">
  <div class="btn-wrapper">
    <button>X</button>
  </div>
  <textarea></textarea>
</div>

CSS

.container {
  height: 220px;
  width: 220px;
  background-color: pink;
  display: flex;
  flex-direction: column; 
 } 

.container textarea {
  box-sizing: border-box; /* fit parent width */
  height: 100%;
}

jsFiddle

Upvotes: 22

Eric MORAND
Eric MORAND

Reputation: 6783

Why are you using display: table-row; declarations ? There is no need for this. Remove the display: table-row; declarations, add a box-sizing: border-box; declaration to your textarea selector and you're all set :

.container
{
    height: 220px;
    width: 220px;
    background-color: pink; 
}

.container > textarea
{
    width: 100%;
    height: 100%;
    background-color: cyan;
    box-sizing: border-box;
}

.container > div
{
    width: 100%;
    height: 100%;
    background-color: cyan;
}

Fiddle

EDIT :

The CSS above makes the text area overflowing its parent div.

Here is an updated answer :

HTML

<div class="container">
    <div class="button-wrapper">
        <button>X</button>
    </div>
    <div class="textarea-wrapper">
        <textarea></textarea>
    </div>
</div>

CSS 2

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
    position: absolute;
}
.container textarea {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 0, 0.5);
    box-sizing: border-box;
}
.container > div {
    background-color: cyan;
}
.container .button-wrapper {
    background-color: yellow;
    height: 26px;
}
.container .textarea-wrapper {
    background-color: green;
    position: absolute;
    top: 26px;
    width: 100%;
    bottom: 0;
}

CSS 3 (using calc function)

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
}
.container textarea {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 0, 0.5);
    box-sizing: border-box;
}
.container > div {
    background-color: cyan;
}
.container .button-wrapper {
    background-color: yellow;
    height: 26px;
}
.container .textarea-wrapper {
    background-color: green;
    height: calc(100% - 26px);
}

Here are fiddles that shows both solutions :

CSS 2

CSS 3

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41852

If you set a fixed height to the button then you can use positioning and do something like this:

HTML: (removed br tag)

<div class="container">
    <button>X</button>
    <textarea></textarea>
</div>
<div class="container">
    <button>X</button>
    <div>Text</div>
</div>

CSS 

.container {
    height: 220px;
    width: 220px;
    background-color: pink;
    display: table;
}
.container > button {
    display: table-row;
}
.container > textarea, .container > div {
    display: table-row;
    border: none;  /* if you keep border then textarea will go out of the parent element */
    height: 200px; /* hardcoded */
    padding: 0px;  /* removing padding for chrome */
    width: 100%;
    background-color: cyan;
}

Working Fiddle

Upvotes: 0

Related Questions