Css/html: Footer on the milddle of the page

hi, sorry for my English…

I to try as here to say towards the footer to keep where it belongs, without it to happen… .
On my Css I have different Media Query (desktop, tablet and smartphone), Now to try Media query for iPad-5, my website I have to build with Grid Layout.
My HTML file:

<?php
 
 header('Content-Type: text/html; charset=utf-8');
 mb_internal_encoding('UTF-8');
 date_default_timezone_set('UTC');
?> 

<!doctype html>

<html lang="en">
<head>
    

    
    
    <title>Linux Mint</title>
    <meta name="google-site-verification" content="zRTf5f-S-Vo6y3pl1o0bNstKSUHaW7fmCbuj311bJkQ" />  

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="preload" href="/home/linuxuse/public_html/de/CSS/windows.css" as="style">
    <link rel="preload" href="/home/linuxuse/public_html/de/CSS/linux_mint.css" as="style">
    <link rel="preload" href="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" as="script">

  

    
    


<style>
<?php

   include "/var/www/html/en/CSS/bb.css"; 
   include "/var/www/html/en/CSS/mm.css";
?>








.a {

  background-color: #f0f8ec;

} 




img {

  float: left;
  margin-right: 5px;
}
    
</style>


</head>	
	
<body>
    

<header></header>    






<nav id="navs">
   <ul>
    <li><a href="/de/about_us.php">Über uns</a></li>
    <li><a href="/de/contact.php">Kontact</a></li>
  </ul>
  <ul>
    <li><a href="/de/index.php">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Linux OS</a>
      <div class="dropdown-content">
       <a href="/de/linux_mint.php">Linux Mint</a>
       <a href="/de/ubuntu.php">Ubuntu</a>
       <a href="/de/debian.php">Debian</a>
       <a href="/de/android.php">Android</a>
      </div>
     </li>
     <li class="new-link">
       <a href="#" class="neuen">News & Mehr</a>
       <div class="new-content">
          <a href="#">News</a>
          <a href="#">Geek</a>
        </div>
      </li>
      <li><a id="book"  href="#">Bücher</a></li>
      <li class="languag">
        <a href="#" class="language">&#127757; Englisch</a>
        <div class="languages">
        <a href="https://linuxusers.net/index.php">Englisch</a>
        <a href="https://linuxusers.net/es/index.php">Spanisch</a>
       </div>
      </li> 
   </ul>
</nav>





<main>

<br>
<br>


<br>
<br>




<article class="a">
<h4>MediathekView in Linux Mint Installieren</h4>
<img src="/Photo/linux_mint.jpeg"  alt="icono linux mint"/>
<p>Hier wird erklärt wie MediathekView in Linux Mint 19 und Linux Mint 18 Installieren werden. Wenn du Linux Mint 18 hast, musst die Paketquelle für openjdk hinzufügen
. </p><br>
<a style="text-decoration: none;" href="/de/linux_mint/install_mediatekview_linux_mint.php">Read more...</a>
</article>
<br>
<br>
<br>
<article class="a">
<h4>VirtualBox in Linux Mint installieren</h4>
<img src="/Photo/linux_mint.jpeg"  alt="icono ubuntu"/>
<p>Hier wird erklärt, wie VirtualBox in Linux Mint installiert wird. Dies funktioniert für alle Linux Mint-Desktops (Cinnamon, Mate und Xfce). Wir werden VirtualBox installieren und das Drittanbieter-Repository von VirtualBox hinzufügen.
. </p><br>
<a style="text-decoration: none;" href="/de/linux_mint/virtualbox_in_linux_mint_installieren.php">Read more...</a>
</article>
<br>
<br>
<br>
<article class="a">
    <h4>Erstellen einen neuen Benutzer in Ubuntu, Linux Mint und Debian </h4>
    <img src="/Photo/linux.svg" alt="icono linux "/>
    <p>Wir werden ein neu benutze mit dem Befehl <b>adduser</b> erstellt. Mit adduser erstellen wir den neuen Benutzer und fügen ihn der <b>sudo Gruppe</b> hinzu. Adduser wird in allen Debian-basierten Distributionen wie Linux Mint und Ubuntu enthalten.  </p><br>
    <a style="text-decoration: none;" href="/de/linux_mint/erstellen_einen_neue_benutzer_in_ubuntu_linux_mint_und_debian.php">Read more...</a>
</article> 
<br>
<br>
<br>
<article class="a">
    <h4>15 wichtige Linux-Befehle, die der neue Linux-Benutzer kennen sollte</h4>
    <img src="/Photo/linux_mint.jpeg" alt="icono linux mint"/>
    <p>15 wichtige Linux-Befehle, die der neue Linux-Benutzer kennen sollte, Die Konsole ist ein wichtiges Werkzeug unter Linux, daher ist es wichtig, es zu kennen.. </p><br>
    <a style="text-decoration: none;" href="/de/linux_mint/15_wichtige_Linux-Befehle.php">Read more...</a>
</article> 
<br>
<br>
<br>


<br>
<br>
<br>



<br>
<br>
<br>	

</main>



<div class="zwei">
</div>



<aside>
 
</aside>


<footer id="copry" >
<p>linuxusers.net: Linux und Mehr © 2019. Alle Rechte vorbehalten.</p>
<a id="img1"  href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de">
  <img class="bild" src="/de/Photo/by-nc-nd.png" alt="Symbol creative commons">
</a>
<p>Diese Arbeit unterliegt den Bestimmungen einer Creative Commons Attribution-NonCommercial 4.0 International License. 
Der Inhalt dieser Website kann ohne unsere Erlaubnis weder online noch offline erneut veröffentlicht werden.
</footer>



</body>
</html>

In my Css and Media Query file I have this,

@media only screen and (max-width: 30.82em) 
                   and (min-width: 15em) 
                   and (orientation: landscape) {
   
    body {
       display: grid;
       background-color: #eaf6e5;
       grid-row-gap: 5px;
       grid-template:  
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 11em 
        "main main gap2" 3em
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
        
       
       
    }
    header { 
     
     grid-area: header;
      background-image: url('/Photo/night.JPG');
      background-repeat: no-repeat;
      background-size: 100% auto;
      width: 100%;
      height: 60px;
      margin-bottom: 2px; 
        
    }
    
     
    
    body > main {
    grid-area: main;     
     position: relative;
     min-height: 100vh;
     
    }
    footer#copry { 
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;  
    }
  
    body > main {
      grid-area: main;    
       box-sizing: border-box;    /* margin wo der test anfang    */  
       padding: 5px;             /* margin wo der test anfang , padding für den margin    */ 
       font-size: 16px;
       margin-right: 2px;
       margin-left: 14px;
      
    }
    
    article {margin-left: 2px;}
    
    nav ul {list-style-type: none;  flex: 1 0 auto; padding: 0px 10px 0px 9px;}
    nav ul:nth-of-type(2) { text-align: left; padding: 0px 0px 0px 2px}
    
    
    nav a { font-size: 13px; }
   
    /*  new-links    */

   .dropdown:hover .dropdown-content {top: 31px; }
   .new-link:hover .new-content { top: 31px}  
   .languag:hover .languages {top: 31px;}  

   .dropdown-content a { -webkit-padding-start: 15px; } 
   .new-content a { -webkit-padding-start:  45px;}
   .languages a {-webkit-padding-start:  35px;}     
   
    
    
    .dropdown-content a { padding: 10px 8px; font-size: 13px; }
    
    .link_change ul {margin-top: 20px;} 
    
     
    .new-content a { padding: 10px 24px; font-size: 13px;}  

    .languages a { padding: 10px 21px; font-size: 13px; }

    
    #name {font-size: 0.5em; padding: 7px; margin-bottom: 4px;}
    #email {font-size: 0.5em; padding: 7px;}
    #text {font-size: 0.7em;}          

    
    .link_change ul {margin-top: 20px;} 
    #img1 {float: left; margin: 1px; }
    #copry a {text-decoration: none; }
   
    }
 
    

I have as the link to say, in my body Element,

body > main {
    grid-area: main;     
     position: relative;
     min-height: 100vh;
     
    }

and on my footer Element,

footer#copry{ 
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;  
    }

but nothing to change, as the screenshot to see,

Can Please anyone help me with this problem, Thanks!

Hello there.

If you are trying to follow the freeCodeCamp guide, you should set your footer to:

footer {
  position: absolute; /* NOT fixed */
}

Hope this helps.

It is caused by the viewport height set on main.

@ Sky020 and lasjorg very Thanks for your answer!

@ Sky020, i doing

 body > footer{ 
        grid-area: footer;  
        position: absolute; /* NOT fixed */ 
        
           
    }
  

or/and

 footer{  position: absolute; /* NOT fixed */  }

my footer go to top above…

@lasjorg

It is caused by the viewport height set on main

you means here,

body > main {
    grid-area: main;     
     position: relative;
     min-height: 100vh;
     
    }

but when try without height,

body > main {
    grid-area: main;     
     position: relative;
     
     
    }

nothing to change…

found the solution! :grinning:

How I to say, I build my Website with Grid Layout, here for iPad-5

body {
       display: grid;
       
       background-color: #eaf6e5;
       grid-row-gap: 5px;
       grid-template:  
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 11em 
        "main main gap2" 3em
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
        
       
    }
   .
   .

Now , only write,

 body > main { 
      grid-area: main;
      height: 100%;
      
    }

… and the screenshot…

lasjorg and Sky020 you indicate me the way for the solution…

I wish your a nice day!

1 Like