New header: Make sure the footer is always at the bottom of the page
<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>
