javascript - 如何让我的页脚从顶部覆盖页面的 100% 高度和宽度？

Question

我有一个带有页眉、页脚和内容的 html 页面。当用户点击我的页脚时，我希望页脚从顶部开始覆盖整个页面。当我将页脚的高度和宽度设置为 100vh 和 100vw 时。它从底部开始。我如何让它从顶部覆盖？

Answer 1

您需要使用 percentage % 而不是 vh/vw/px。您需要设置 top:0; 和 height: 100%(设备屏幕的全高)。

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>

<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>

<div id='footer' class='footer' onClick='toggle()'>
  Click to maximise
</div>