Fixed Footer scrolling into Body on window resizing-CodePudding

I'm having an issue with the footer on resizing the desktop window. It seems to work great testing in developer tools, but once testing in different browsers, the responsiveness is messing with the footer placement. Making it scroll over the rest of . Would be greatly appreciative of any insight into what I'm doing wrong?

sample site here: https://rrrhhhhhhhhh.github.io/dsn/ code here: https://github.com/rrrhhhhhhhhh/dsn

HTML:

 <body>
   <div id="content">
    <section class="helvetica">

    <div class="image-wrapper logo">
      <img src="./resources/images/dsn-designs.png">
    </div>

     <div class="image-wrapper">
      <img src="./resources/images/dsn.jpg">
     </div>
     </section>

     <section class="helvetica">
      <p><h2>Welcome.</h2></p>
     </section>


      <footer>
       <section class="bottom">

       <p><a href="mailto:[email protected]" class="push link-green" target="_blank">[email protected]</a></p>
       </section>
       </div>
      </footer>

CSS:


body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(14px   (21 - 14) * ((100vw - 300px) / (1600 - 300)));
    letter-spacing: 0.08em;
    line-height: 1.3em;
    background: #9fab9d;
    color: white;
    position: relative;
}

#content {
    margin: calc(2vw   20px);
}

section {
    margin-bottom: 2em;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: ;
  color: white;
  text-align: left;
}

section.bottom {
  margin-left: calc(2vw   20px);
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

CodePudding user response：

I would try position: absolute; or position: relative; It is unclear exactly what the objective is without more code to support. However, using a position: fixed; will make the footer scroll over the rest despite what browser you are in.

CodePudding user response：

If you are giving position: relative; for footer it will be placed at the bottom and will be visible only when the user reaches the bottom of the page.

Another alternative is position: sticky; . In this case the footer will always be there on the bottom of the browser window mostly on top of your other content. If you scroll all the way to bottom the footer will be there at the bottom of the page with a gap between footer and the rest of your contents.