CODEWITHSUNDEEP
javascriptcss
Tom
Tom

Reputation: 3034

How to make div take all the height available?

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/

Upvotes: 0

Views: 506

Answers (7)

shlomo_maghen
shlomo_maghen

Reputation: 141

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/

Upvotes: 0

Jordan
Jordan

Reputation: 1121

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.

Upvotes: 2

Ryan Britton
Ryan Britton

Reputation: 86

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/

Upvotes: 2

brso05
brso05

Reputation: 13222

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

Upvotes: 1

Tom
Tom

Reputation: 3034

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/

Upvotes: -1

Michael Bar-Sinai
Michael Bar-Sinai

Reputation: 2739

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.

Upvotes: 2

Arthur Kay
Arthur Kay

Reputation: 121

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.

Upvotes: 2

Related Questions