$0.23

How to make my footer cover 100% height and width of the page from top?

Ask a question+
2

I have an HTML page with a header, footer, and content. When a user clicks on my footer, I want the footer to cover the whole page starting from the top. When I set the height and width of the footer to be 100vh and 100vw, it makes it from the bottom. How do I make it cover from the top?

add comment

1 Answer

2

You need to use a percentage % instead of vh/vw/px. You need to set top:0; and height: 100% (Full Height of device screen).

function toggle() {
  var className = document.getElementById('footer').className;

  if (className == 'footer') {
    document.getElementById('footer').innerText = 'Click to minimize';
    document.getElementById('footer').className = 'footer full';
  } else {
    document.getElementById('footer').innerText = 'Click to miximize';
    document.getElementById('footer').className = 'footer';
  }
}
.footer {
  background-color: #000;
  color: #FFF;
  width: 100%;
  padding: 20px 0;
}

.full {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
}
<h1>My heading</h1>
<p>
  Hello, this click on the footer to expand it.
</p>
<br>
<p>
  Hello, this click on the footer to expand it.
</p>
<br>
<p>
  Hello, this click on the footer to expand it.
</p>
<br>
<p>
  Hello, this click on the footer to expand it.
</p>
<br>
<p>
  Hello, this click on the footer to expand it.
</p>
<br>
<p>
  Hello, this click on the footer to expand it.
</p>
<div id='footer' class='footer' onClick='toggle()'>
  Click to maximise
</div>
add comment

Your Answer