簡體   English   中英

如何讓我的頁腳從頂部覆蓋 100% 的頁面高度和寬度?

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

我有一個帶有 header、頁腳和內容的 html 頁面。 當用戶點擊我的頁腳時,我希望頁腳從頂部開始覆蓋整個頁面。 當我將頁腳的高度和寬度設置為 100vh 和 100vw 時。 它是從底部開始的。 我如何使它從頂部覆蓋? 網頁布局的圖像

您需要使用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>

嘗試這個:

$('.footer').click(function(){
        $(this).toggleClass('new_footer');
    });



.new_footer{
    background-color: #000;
    position: fixed;
    top: 0;'
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100%;
    color: #fff;
}
<header>
  My heaader
</header>

<div>content</div>

<div class="footer">
 My footer
</div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM