0

I am just a beginner, can anyone clarify this doubt please >>
I was trying to set the height of a textarea in percentage but was not able to do that, when I used "em", it worked fine. I have already gone through the relationship between % and "em":

#t-area {
    width: 100%;
    height: 25em;
    padding: 1em;
    resize: none;
} 

#t-area {
    width: 100%;
    height: 80%;
    padding: 1em;
    resize: none;
}

Full Code

  • This is working as I wanted...

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: 'Times New Roman', Times, serif;
}
.container {
    min-width: 350px;
    padding: 1em;
}
.text-box {
    border: 1px solid black;
    padding: 1em;
}
#t-box {
    padding: 1em;
}
#t-area {
    width: 100%;
    height: 25em;
    padding: 1em;
    resize: none;
}
<div class="container">
        <div class="text-box">
            <form action="#" id="txt-form" name="txt-form">
                <div>
                    <label for="t-area" id="t-area-label">Text Box</label>
                </div>
                <br />
                <div id="t-box" for="t-area">
                    <textarea name="t-area" id="t-area" placeholder="..."></textarea>
                </div>

            </form>
        </div>
    </div>
  • But the below one is not...

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: 'Times New Roman', Times, serif;
}
.container {
    min-width: 350px;
    padding: 1em;
}
.text-box {
    border: 1px solid black;
    padding: 1em;
}
#t-box {
    padding: 1em;
}
#t-area {
    width: 100%;
    height: 80%;
    padding: 1em;
    resize: none;
}
<div class="container">
        <div class="text-box">
            <form action="#" id="txt-form" name="txt-form">
                <div>
                    <label for="t-area" id="t-area-label">Text Box</label>
                </div>
                <br />
                <div id="t-box" for="t-area">
                    <textarea name="t-area" id="t-area" placeholder="..."></textarea>
                </div>

            </form>
        </div>

    </div>
Souvik Dey
  • 37
  • 8

1 Answers1

1

If you set the height for the container or the text-box the percentage should work for the t-area.

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/height

mrnfg
  • 26
  • 3