JSFiddle - React, Tailwind, and code Playground

by Konrad P

HTML

<div class = 'content'>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <div id = 'test1wrap'>
    Works fine, but: 
    <button id = 'test1'>
      Change footer size
  </button>     
  </div> 
</div>
<footer>
  That's a footer.
</footer>

CSS

/*
I don't want the footer to cover the content. I would like to say - content: height - make it 'auto' plus height of the footer.

The trick with 'margin' works fine, but I don't want to to explicitly set it to an absolute value (here: 110px).

Also, if the footer's height increases, it again covers the contents.
*/

.content {

    margin-bottom:110px;
    color:green;
}

footer {
    background: red;
    opacity:0.4;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
}

JavaScript

let sel = (s)=>document.querySelector(s);

sel('#test1').addEventListener('click', ()=>{
	sel('footer').style.height = '200px';
  sel('#test1wrap').innerHTML += ' ...and now it covers content again';
})