Geek Answers Handbook

Textarea always has a window height

I am not sure how to do this. I am currently using Bootstrap textarea along with my container. I don’t know how to make the text area extend to the bottom of the screen, which automatically increases / decreases depending on the height of the window. I tried:

#form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

But nothing changes. Does anyone know how I can do this?

Edit:

This is my html file:

<body>
    <div class="container">
        <div class="form-group">
            <textarea class="form-control" rows="15" id="note"></textarea>
        </div>
    </div>
</body>
+4
source share
4 answers

You must put the height property on the element, for example, the code below.

#form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:50px;
}

If that doesn't work, try it! If it doesn't work, try setting the lines in the markup and set the line height in CSS.

<textarea rows="4">
+2

.form-control CSS .

<textarea class="form-control"></textarea>? , css #, , . CSS :

.form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
+1

. (id) # form-control, (class).form-control , 100% .

.form-control {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%
}
<div class="form-group">
  <textarea class="form-control" placeholder="textarea"></textarea>
</div>
Hide result
+1

height, .

- :

#form-control {
position:fixed;
height: 200px;
}


#form-control {
position:fixed;
height: 50%;
}

.

W3 Schools height css... , , .

There is a link to this demo on this page , which I suggest you try to see what different “settings” are due to the lack of a better word do.

Also make sure that the opening tag <textarea>causes the selector ... so it should look something like this: <textarea id="form-control">.

Luck

0
source

More articles:


All Articles