New header: Make sure the footer is always at the bottom of the page
P粉318928159
2023-08-27 23:13:19
<p>I'm working on a project where I want the footer to stay at the bottom of the page but not be visible until I scroll to the bottom of the page. I tried using 'position: fixed' in my CSS, but it floats above my content, and with absolute positioning, it gets fixed in the middle of the page and covers the content. Also, for pages that don't have a lot of content, when I don't specify a position or use 'position: absolute', there is white space below the footer. Please provide suggestions. </p>
<pre class="brush:php;toolbar:false;">* {
margin: 0;
padding: 0;
}
header {
background-color: gray;
}
footer {
background-color: gray;
bottom: 0;
height: 20px;
position: fixed;
width: 100%;
}
/* When I use fixed positioning, the footer is fixed above the content. What I want is for the footer to remain at the bottom of the page but not visible. */
<html>
<body>
<header>Title</header>
<main>
<h1>Title</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.</p>
</main>
<footer>© Copyright, Commercial</footer>
</body>
</html></pre>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I think you can add a parent div to it with the same width and height as it.
html:
.footer { position: fixed; bottom: 0; left: 0; width: 100vw; height: 200px; background-color: red; } .footer-container { height: 200px; width: 100vw; }