Height Percentage

Question

I want to keep height of the textarea 50% of the frame's height in DEMO. If i resize the height of the result frame, textarea's height isn't change dynamically. How can i do that?

    html, body {
    line-height: 1;
    background:#F8F8F8;
    font-size: 22px;
    height: 100%;
    width: 100%;
}


#text {
    width: 95%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    clear:both;
}



#textArea {
    width: 95%;
    height:auto !important; /* real browsers */
    height:50%; /* IE6: treaded as min-height*/

    min-height:50%; /* real browsers */
    max-width: 902px;
    margin-left: auto;
    margin-top: 5px;
    background-color: blue;
}

score 1 · Answer 1 · answered Sep 13 '13 at 21:52

1

You have the !important value in your height: auto property, so that auto is always going to override anything else you try to apply to height.

answered Sep 13 '13 at 21:52

frydoubt

77
11

That's incorrect. Specifying width and height override rows and columns in all instances where CSS is supported. Rows and columns will only control the size of the textarea when CSS is not supported. Clarification can be found [here](http://stackoverflow.com/questions/3896537/how-do-you-size-a-textarea). – frydoubt Sep 13 '13 at 22:18

score 0 · Answer 2 · answered Sep 13 '13 at 22:01

0

change the css

#textArea {
        width: 95%;
        height:50% !important;     
        min-height:50%; 
        max-width: 902px;
        margin-left: auto;
        margin-top: 5px;
        background-color: blue;
    }

answered Sep 13 '13 at 22:01

Sobin Augustine

3,639
2
25
43

Height Percentage

2 Answers2