How to make div take all the height available?

Question

I have this HTML:

<div>
  <span></span>
  <textarea></textarea>
</div>

The Span can take up one or more lines (depends on the text it has and size of the Div). I want the Textarea to take all of the height left in div.

Please no jQuery.

https://jsfiddle.net/ntme8Lt4/

Can you show us an example of the problem you're having in jsfiddle.net? — Tek, May 14 '15 at 14:15
It all depends on what you are trying to do and what browser support you need. Do you have a fiddle on what you are trying to do? — Andrew, May 14 '15 at 14:20
@Tek: I added a fiddle. As you can see textarea takes too much height. — Tom, May 14 '15 at 14:21
Possible duplicate http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 — Paulie_D, May 14 '15 at 14:22
What browser are you using? The textarea is using all the space that the span isn't using. — Tek, May 14 '15 at 14:24
@Tek the newest Firefox. It uses MORE space and gets outside the border of DIV. — Tom, May 14 '15 at 14:26
@Paulie_D I think flex could solve the problem, but it doesn't work below IE10 so it's an unacceptable solution. — Tom, May 14 '15 at 14:27

score 2 · Answer 1 · answered May 14 '15 at 14:17

2

The CSS/style tag for that would just be max-height:100%; and width:100%;

This would hold the div's size constant if it is set to a percentage of its parent container or a constant value like 900px.

Since the size of span is not known, just leave it unspecified so it auto-sizes to content.

answered May 14 '15 at 14:17

Arthur Kay

121
4

I don't see how max-height helps me here. Please see: https://jsfiddle.net/ntme8Lt4/ – Tom May 14 '15 at 14:25

score 2 · Answer 2 · answered May 14 '15 at 14:18

2

There's a circular issue here - the height of the div is (normally) determined by the size of its components. You need something to break the circle and determine the height of either the div or the text area.

answered May 14 '15 at 14:18

Michael Bar-Sinai

2,729
20
27

The height of div is set. – Tom May 14 '15 at 14:21
1

I think there's no option other than using JS, along the lines proposed by @brso05, as the height of the span is unknown at design time. Flex could work here, but it's not supported enough (sadly). The 100% value of the height and the width refer to the parent div's dimensions, not to the available space. – Michael Bar-Sinai May 14 '15 at 19:00

Ryan Britton · Answer 3 · 2015-05-14T14:55:28.047

2

You can use offsetHeight to get the heights of the different elements, and from there it is just a calculation of the container - span element to find the remaining.

document.querySelector('textarea').style.height = (document.querySelector('div').offsetHeight-document.querySelector('span').offsetHeight)+'px'

http://jsfiddle.net/rhbritton/4eck8dua/1/

edited May 14 '15 at 14:55

answered May 14 '15 at 14:45

Ryan Britton

86
3

Jordan · Answer 4 · 2015-05-14T15:10:17.727

2

If you're just wanting to use pure CSS and without the needs of tables etc you could try this approach.

HTML:

<div>
   <span>
       Hello<br>
       Hello<br>
       Hello
   </span>
   <textarea></textarea>
</div>

CSS:

div {
    width: 400px;
    height: 300px;
    overflow: hidden;
    border: 1px solid red;
}
span {
    width: 100%;
    display: block;
    background-color: red;
}
textarea {      
    width: 100%;
    height: 100%;
    background-color: blue;
}

JSFiddle

Let me know if this works for you.

edited May 14 '15 at 15:10

answered May 14 '15 at 14:56

Jordan

1,101
1
12
26

That's almost right. If textarea has visible scrollbars then they are cut. – Tom May 17 '15 at 12:46

score 1 · Answer 5 · edited May 23 '17 at 12:00

1

You can use clientWidth and clientHeight if your willing to use pure JS:

Here is the fiddle

function test()
{ 
    var div = document.getElementById("testDiv");
    var span = document.getElementById("testSpan");
    var textArea = document.getElementById("testTextArea");
    var height = div.clientHeight - span.clientHeight;
    textArea.style.height = (height - 5) + "px";
    textArea.style.width = (div.clientWidth - 5) + "px";
}

test();

Reference

edited May 23 '17 at 12:00

Community

1
1

answered May 14 '15 at 14:43

brso05

13,142
2
21
40

1

@Tom if you don't want to wrap with `` tag here is a solution using plain JS. – brso05 May 14 '15 at 14:45

score 0 · Answer 6 · answered Aug 04 '16 at 08:07

you can use flex

div
{
    display: flex;
    flex-direction: column; /*layout top to bottom*/
    height: 300px;
    width: 400px;
    border: 1px solid red;    
}
span
{
    display: block;
    background-color: red;
}
textarea
{    
    background-color: blue;
    height: 100%;
    width: 100%;
    flex-grow: 1; /*take up remaining space in flex container*/
}
}

https://jsfiddle.net/ntme8Lt4/13/

score -1 · Accepted Answer · answered May 14 '15 at 14:36

Thanks to the "possible duplicate" I came up with this solution:

<div>
  <span>Hello<br>World</span>
    <b><textarea></textarea></b>
</div>

div
{
    height: 300px;
    width: 400px;
    border: 1px solid red;   
    display: table;
}
span
{
    display: block;
    background-color: red;
}
b
{    

    height: 100%;
    width: 100%;
    display: table-row;
}
textarea
{
    height: 100%;
    width: 100%;
    background-color: blue;    
}

https://jsfiddle.net/c42go079/

How to make div take all the height available?

7 Answers7