[英]How to make my footer cover 100% height and width of the page from top?
I have an html page with header, footer and content.我有一个带有 header、页脚和内容的 html 页面。 When 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 footer to be 100vh and 100vw.
当我将页脚的高度和宽度设置为 100vh 和 100vw 时。 It makes it from the bottom.
它是从底部开始的。 How do i make it cover from the top?
我如何使它从顶部覆盖?
You need to use percentage %
instead of vh/vw/px
.您需要使用
percentage %
而不是vh/vw/px
。 You need to set top:0;
您需要设置
top:0;
and height: 100%
(Full Height of device screen).和
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>
Try this:尝试这个:
$('.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.