Dynamic height not working Javascript

Question

I am trying to add height to a div dynamically by calculating header div height and footer div height, but it's not working, Here is the example of the code:

I am looking to handle in pure javascript, no JQuery

function contentHeight(e){
  var winH = document.documentElement.clientHeight;
  var headerH = document.getElementsByClassName('header')[0];
  var footerH = document.getElementsByClassName('footer')[0];
  var contentHei = winH - headerH.clientHeight - footerH.clientHeight;
  document.getElementsByClassName('content-inner')[0].clientHeight = contentHei + "px";
}
contentHeight();

<div class="header">
    this is content of header
</div>
<div class="content-inner">
    <!-- Apply dynamic height to this div by calculating header and footer height -->
</div>
<div class="footer">
    footer content
</div>

Do some basic debugging. Do the values of the variables you're assigning contain what you think they do? — Mitya
– Mitya, Commented May 4, 2018 at 10:32
im pretty sure clientHeight is read only, have you tried height? — mast3rd3mon
– mast3rd3mon, Commented May 4, 2018 at 10:32

Temani Afif · Accepted Answer · 2018-05-04 10:33:45Z

You need to use style.height in order to adjust the height of an element using JS

function contentHeight(e){
  var winH = document.documentElement.clientHeight;
  var headerH = document.getElementsByClassName('header')[0];
  var footerH = document.getElementsByClassName('footer')[0];
  var contentHei = winH - headerH.clientHeight - footerH.clientHeight;
  document.getElementsByClassName('content-inner')[0].style.height = contentHei + "px";
}
contentHeight();

body {
 margin:0;
}

<div class="header">
    this is content of header
</div>
<div class="content-inner">
    <!-- Apply dynamic height to this div by calculating header and footer height -->
</div>
<div class="footer">
    footer content
</div>

By the way I suspect you want your content to take the free left space of the screen and you can easily do this with pure CSS.

Here is an idea with flexbox:

body {
 margin:0;
 height:100vh;
 display:flex;
 flex-direction:column
}

.content-inner {
  flex:1; /*Fill the empty space*/
  background:yellow;
}

<div class="header">
    this is content of header
</div>
<div class="content-inner">
    
</div>
<div class="footer">
    footer content
</div>

Collectives™ on Stack Overflow

Dynamic height not working Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related