search

Home  >  Q&A  >  body text

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>&copy; Copyright, Commercial</footer> </body> </html></pre>
P粉318928159P粉318928159454 days ago483

reply all(1)I'll reply

  • P粉554842091

    P粉5548420912023-08-28 20:08:54

    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;
}
    <div class="footer-container">
  <div class="footer"></div>
</div>

    reply
    0
  • Cancelreply