Prevent footer from being overlapped by other elements in a flex container

Question

In my web page there's a footer which should be at the bottom of the page, with all the content visible on its top.

But as soon as I add my header (I know it's a huge header but I like it) or any other type of content, the footer just overlaps it.

How can I prevent this?

Here 's the code:

@font-face {  
   font-family: "Neuropol";
   src: url("http://gameenkaku.altervista.org/it/CSS/Fonts/neuropol.ttf") 
   format("truetype"); 
   } 
   
@font-face{  
   font-family: "Conthrax"; 
   src: url("http://gameenkaku.altervista.org/it/CSS/Fonts/conthrax-sb.ttf") 
   format("truetype"); 
   } 
   
@font-face {   
   font-family: "Karcade";   
   src: url("http://gameenkaku.altervista.org/it/CSS/Fonts/karmatic_arcade.ttf") 
   format("truetype");  
   }

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding:0;
}

section.content {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
}

ul{
        padding: 0;
        list-style: none;
        border-style: solid none;
        border-color: lightblue;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
     font-family: "Neuropol";
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #0066ff;/*#939393;*/
    }
    ul li ul.dropdown{
        min-width: 125px; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }

html, body {
            margin:0;
            padding:0;
            height:100%;
     }
    
    div {
     padding: 0;
 }
    
    a {
     text-align:center;
    }
    
    h1, h2, h3, h4, h5, h6 {font-family: "Karcade", sans-serif;}
    
    p {padding:0px 15px;}
       
    th, td {
        font-family: "Conthrax", sans-serif;
        color: white;
     }
     
    th {
     background-color: #0066ff;
     color: white;
  }

    footer {
     text-align:center;
     color:white;
        font-size:0.5em;
        width:100%;
  height:auto;
  position:absolute;
  bottom:0;
  left:0;
        background-color:black;*#0066ff;*/
       }
    
    /*.classes*/
    
    .wrapper { 
      margin:0 0;
            padding:0 0 0 0;
            width: 100% ; /*58.536585%; 960/1640 = .58536585*/
            height: auto;
       
             }
    
    .wallpaper {
     overflow-x:hidden;
    }
    
    .logo {
     z-index: 999999;
        position: absolute;
        padding: 0;
        margin-top: -17%;
        margin-left: 69%;
        height: auto;
        width: 25%;
        }
             
 .resize {
      width:100%; 
            height:auto;
            margin:0 0 0 0;
            padding:0 0 0 0;
            }

<!DOCTYPE html>
<html>
 <head>
     <title>GameEnkaku - </title>
        <link rel="stylesheet" type="text/css" href="CSS/bodyStyle.css"/>
    <link rel="stylesheet" type="text/css" href="CSS/menuStyle.css"/>
        <link rel="stylesheet" type="text/css" href="CSS/flexStyle.css"/>
        <link rel="stylesheet" type="text/css" href="CSS/fonts.css"/>
 <head>
 <body>
     <div class="flex-container">
     <header>
       <div class="wrapper"><img class="resize" src="http://gameenkaku.altervista.org/it/Immagini/eSportsWallpaper.jpg" alt="Promo"></div>
    <img class="logo" src="http://gameenkaku.altervista.org/it/Immagini/logoPixel.png" alt="GameEnkaku Logo">
    <ul>
           <li><a href="newHomepage.html">Home</a></li>
           <li><a href="#">La Storia &#9662;</a>
               <ul class="dropdown">
                   <li><a href="origini.html">Le origini</a></li>
                   <li><a href="anni60-70.html">Anni '60 e Anni '70</a></li>
                   <li><a href="anni80.html">Anni '80</a></li>
                      <li><a href="anni90.html">Anni '90</a></li>
                      <li><a href="anni2000.html">Il nuovo<br>Millennio</a></li>
                      <li><a href="anni2010.html">Il Futuro</a></li>
               </ul>
                 </li>
           <li><a href="#"> Le Console &#9662;  </a>
               <ul class="dropdown">
                   <li><a href="generazione1.html">I generaz.</a></li>
                   <li><a href="generazione2.html">II generaz.</a></li>
                   <li><a href="generazione3.html">III generaz.</a></li>
                      <li><a href="generazione4.html">IV generaz.</a></li>
                      <li><a href="generazione5.html">V generaz.</a></li>
                      <li><a href="generazione6.html">VI generaz.</a></li>
                      <li><a href="generazione7.html">VII generaz.</a></li>
                      <li><a href="generazione8.html">VIII generaz.</a></li>
                      <li><a href="generazione9.html">Uscite future</a></li>
               </ul>
           </li>
           <li><a href="#">Videogiochi &#9662;</a>
               <ul class="dropdown">
                   <li><a href="arcadeLista.html">Arcade</a></li>
                      <li><a href="cartucceLista.html">Cartucce</a></li>
                      <li><a href="cdLista.html">CD/DVD</a></li>
                      <li><a href="downloadLista.html">Digital Download</a></li>
                  </ul>
              </li>
              <li><a href="#">Approfondimenti &#9662;</a>
               <ul class="dropdown">
                   <li><a href="letteratura.html">I videogiochi e la letteratura</a></li>
                      <li><a href="multiplayer.html">Il multiplayer online</a></li>
                      <li><a href="eSports.html">What is eSports?</a></li>
                            <li><a href="curiosita.html">Curiosit&agrave; e sitologia</a></li>
                  </ul>
              </li>
       </ul>
     </header>
         <section class="content">
       <div>Content
                  a<br> <!--text demo!-->
                     a<br>
                </div>
     </section>
     <footer>
       <table>
                 <tr>
                     <th>La Storia</th>
                        <th>Le Console</th>
                        <th>Videogiochi</th>
                        <th>Approfondimenti</th>
                    </tr>
                    <tr>
                     <td><a href="origini.html">Le origini</a></td>
                        <td><a href="generazione1.html">I generaz.</a></td>
                        <td><a href="arcadeLista.html">Arcade</a></td>
                        <td><a href="letteratura.html">I videogiochi e la letteratura</a></td>
                    </tr>
                    <tr>
                     <td><a href="anni60-70.html">Anni '60 e Anni '70</a></td>
                        <td><a href="generazione2.html">II generaz.</a></td>
                        <td><li><a href="cartucceLista.html">Cartucce</a></li></td>
                        <td><li><a href="multiplayer.html">Il multiplayer online</a></li></td>
                    </tr>
                    <tr>
                     <td><a href="anni80.html">Anni '80</a></td>
                        <td><a href="generazione3.html">III generaz.</a></td>
                        <td><a href="cdLista.html">CD/DVD</a></td>
                        <td><a href="eSports.html">What is eSports?</a></td>
                    </tr>
                    <tr>
                     <td><a href="anni90.html">Anni '90</a></td>
                        <td><a href="generazione4.html">IV generaz.</a></td>
                        <td><a href="downloadLista.html">Digital Download</a></td>
                        <td><a href="curiosita.html">Curiosit&agrave; e sitologia</a></td>
                    </tr>
                    <tr>
                     <td><a href="anni2000.html">Il nuovo<br>Millennio</a></td>
                        <td><a href="generazione5.html">V generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                     <td><a href="anni2010.html">Il Futuro</a></td>
                        <td><a href="generazione6.html">VI generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                     <td></td>
                        <td><a href="generazione7.html">VII generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                     <td></td>
                        <td><a href="generazione8.html">VIII generaz.</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                     <td></td>
                        <td><a href="generazione9.html">Uscite future</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
     </footer>
     </div>
  <body>
<html>

You can also see the original page here: http://gameenkaku.altervista.org/it/standardPage.html.

score 0 · Accepted Answer · edited May 23 '17 at 11:52

Your footer is being overlapped because it's absolutely positioned.

From your code:

footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

When you use position: absolute you remove the element from the normal flow of the document. Hence, other elements don't recognize its existence.

Since the footer is a child in a column-direction flex container...

From your code:

.flex-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
}

... you don't need absolute positioning.

Here are three possible alternatives:

You already have flex: 1 applied to a sibling (section.content). This will force the footer to the bottom. Basically, the absolute positioning is redundant anyway. Just remove it to fix the overlapping problem.
If you don't want to rely on the flex: 1, you can apply justify-content: space-between to .flex-container. This will pin the footer (as the last sibling) to the bottom edge of the container.
Apply margin-top: auto to footer.

For more details and other options see: Methods for Aligning Flex Items

It works! Thank you so much @Michael_B , your answer is very helpful, exhaustive and really quick! — Yozora, Jun 07 '16 at 16:40

Prevent footer from being overlapped by other elements in a flex container

1 Answers1