fill the gap between the main and the footer for responsive-CodePudding

When i use the responsive tool of Chrome(<699pw) it create a huge gap between the footer and the div base but i want the footer a the bottom of the page. I don't know if it is the grid of the parent . I want to extend the base and make it closed to the footer so even if we extend the responsive tool. So it'has to follow the footer

header {

    display: grid;
    grid-template: auto;
    grid-template-columns: 1fr 5fr 6fr 4fr;
    align-items: center;
    font-size: 30px;
    position: relative;
    top: 50%;
}


.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 3; }

#bases{
    display: grid;
    grid-template: auto;
    grid-template-columns: 2fr 4fr;
}


html,body{
    margin: 0;
    padding: 0;
}

/* Responsive */

@media (max-width: 699px){
    #Titre {
        display: none;
    }
    
    header {
        background-color: #aa1010;
        font-family: 'LexendTera';
        color: white;
        display: grid;
        grid-template: auto;
        grid-template-columns: 1fr 5fr 6fr 4fr;
        align-items: center;
        font-size: 10px;
        position: relative;
        top: 50%;
    }
    aside{
        display: none;
    }
    #bases{
        display: grid;
        grid-template-columns: 1fr;
    }
    .parent{
        display: grid;
        align-items: center;
    }



    /* Mettre footer en bas de page */
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
       }
    
}

<!DOCTYPE html>
<html lang="fr">
<body>
<header>
    <img src="img/logo.png" alt="logo" id="logo">
    <h1 id="Titre">O'kebab</h1>
    <a href="index1.html">Composition</a>
    <a href="">Connexion</a>
</header>
<div id="bases">
    <main>
        <h1>"La maison du sandwich"</h1>
        <div >
            <div ><h1>Promotion</h1><p>Kebab Végetarien -50%</p> </div>
            <div ><img src="img/vege.png" alt="vege"></div>
            <div ><h1>Kebab du mois</h1><br><p> Kebab spicy</p></div>
            <div ><img src="img/spicy.webp" alt="spicy"></div>
            <div ><button><a href="index1.html">Commandez</a></button></div>
        </div>
    </main>
</div>
    <footer>
        <h2 id="contact">Contact</h2>
        <h2 id="mention">Mentions légales</h2>
        <img src="img/facebook.png" alt="facebook" id="face">
        <img src="img/instagram.png" alt="instagram" id="insta">
        <img src="img/iutly.png" alt="twitter" id="ly1">
        <h3 id="tkt">© 2022 O'kebab</h3>
    </footer>
</body>
</html>

I tried to use position:relative for the body but nothing change

CodePudding user response：

The grid is fine,

In the screen size less than 699px width:

You made the header smaller by reducing its font size. And since a div is a block element by default, it would be positioned in a new line after the last element. So your "bases" div would be on top and attached beneath the header.
You forced the footer to be positioned fixed and go to the bottom of the page.

So naturally, there would be a gap between your "bases" and your "footer".

Now since the element positioned fixed is removed from the normal document flow, and no space is created for it on the page, you can't position the "bases" div relative to the "footer".

But, for fixing the gap between your divs there are many ways...

For example, you can add a height to your "bases" div and make it fill the gap. If you want it to be responsive, instead of an absolute height you can give it a relative height, like using "%" or "vh":

#bases {
  /* Relative to % of the height of the viewport */
  height: 80vh; 
}

And you can adjust the position of contents by "display flex" and "align-items" or maybe using padding and margins.

You can also make it "position absolute" as well and position it somewhere in the middle of the page. as I said there are many ways to fill that gap.

And a quick tip for using media queries, If you want to change an attribute of an element, you don't need to write all of its attributes again.

for example, if you have this code and you want to change its font size:

header {
  display: grid;
  grid-template: auto;
  grid-template-columns: 1fr 5fr 6fr 4fr;
  align-items: center;
  font-size: 30px;
  position: relative;
  top: 50%;
}

You can just change the font size, and there is no need to duplicate all of that code:

@media (max-width: 699px) {
  header {
    font-size: 10px;
  }
}