Difficulty to structure a web page-CodePudding

I'm trying to learn css, html, media queries, flexbox and grid. And I'm actually tring to make a simple web page. I don't understand why I have an empty red block under "hebergement/activité ". Did I fraction wrong my div#container 1? I also have the same problem with the lightgreen block, from section#filtersContainer

Here is the web page as a snippet:

body {
    background-color: whitesmoke;
    max-width: 992px;
    margin: auto;
}
h1,h2,h3,h4,h5,h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}
p {
    margin-top: 0px;
    margin-bottom: 0px;
}
div#container1 {
    background-color: red;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr 1fr;
    grid-template-areas: 
    "navBar"
    "main"
    "basDePage";
    height: 100vh;
}

div.headContainer {
    background-color: bisque;
    display: flex;
}
div.logo {
    background-color: cadetblue;
}
div.hybrid {
    background-color: darkcyan;
    flex-grow: 2;
}
div.hebergement {
    background-color: darkblue;
}
main#container2 {
    background-color: purple;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "section"
    "articles";
    grid-area: main;
}
section#filtersContainer {
    background-color: lightgreen;
    grid-area: section;
}
div.rechercheBar {
    background-color: silver;
    display: flex;
}
div.rechercheBarMobile {
    display: none;
}
div.filters {
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
}
div.filterRelou {
    display: flex;
    flex-wrap: wrap;
}
div.filter {
    background-color: azure;
    display: flex;
}
div.headInformation {
    background-color: slateblue;
    display: flex;
}
article#container3 {
    background-color: lightgreen;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "article1 article2"
    "article3 article3";
    grid-area: articles;
}
section.article1 {
    background-color: peru;
    grid-area: article1;
    border-radius: 15px;
    margin: 15px;
}

aside.article2 {
    background-color: indianred;
    grid-area: article2;
    border-radius: 15px;
    margin: 15px;
}

section.article3 {
    background-color: darkslateblue;
    grid-area: article3;
}

footer.basDePage {
    background-color: gray;
    grid-area: basDePage;

}
/*Format tablette*/
@media screen and (max-width: 992px) and (min-width: 769px) {
    header.navBar {
        background-color: lightpink;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <!--<link rel="stylesheet" href="./css/style.css"/>-->
        <!--<link rel="icon" href="Google__Logo.ico"/>-->
    </head>
    <body>
       <div id="container1">
            <header >
                <div > 
                    <div >Logo</div>
                    <div ></div>
                    <div >
                        <nav>
                            <a href="#">Hebergment</a>
                            <a href="#">Activités</a>
                        </nav>
                    </div>
                </div>
            </header>
            <main id="container2">
                <section id="filtersContainer">
                    <h1>trouver votre hébergement</h1><p>En plain centre</p> 
                    <div >
                        <i>icon</i>
                        <p>Marseille,France</p>
                        <p>bouton recherche</p>
                    </div>
                    <div >
                        <i>icon</i>
                        <p>Marseille,France</p>
                        <i>icon loupe</i>
                    </div>
                    <div >
                        <p>Filtres:</p>
                        <div > 
                            <div >
                                <i>icon</i>
                                <p>Economique</p>
                            </div>
                            <div >
                                <i>icon</i>
                                <p>Famille</p>
                            </div>
                        </div> 
                        <div >
                            <i>icon</i>
                            <p>Romantique</p>
                        </div>
                        <div >
                            <i>icon</i>
                            <p>Animaux</p>
                        </div>
                    </div>
                    <div >
                        <i>icon</i>
                        <p>plus de 500...</p>
                    </div>
                </section>
                <article id="container3">
                    <section >Hébergement</section>
                    <aside >Les plus populaires</aside>
                    <section >Activités à Marseille</section>
                </article>
            </main>
            <footer > pied de page </footer>
       </div>
    </body>
</html>

CodePudding user response：

You have setup your grid to behave this way:

div#container1 {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4fr 1fr;
  grid-template-areas: "navBar" "main" "basDePage";
  height: 100vh;
}

By specifying your rows to equal 1fr 4fr 1fr you are requesting:

header to be 1 fraction of the page height.
main to be 4 fractions of the page height.
footer to be 1 fraction of the page height.

If you want your header to be a specific height then set it to be the height you desire e.g 20px

body {
  background-color: whitesmoke;
  max-width: 992px;
  margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

div#container1 {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 18px 4fr 20px;
  grid-template-areas: "navBar" "main" "basDePage";
  height: 100vh;
}

div.headContainer {
  background-color: bisque;
  display: flex;
}

div.logo {
  background-color: cadetblue;
}

div.hybrid {
  background-color: darkcyan;
  flex-grow: 2;
}

div.hebergement {
  background-color: darkblue;
}

main#container2 {
  background-color: purple;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "section" "articles";
  grid-area: main;
}

section#filtersContainer {
  background-color: lightgreen;
  grid-area: section;
}

div.rechercheBar {
  background-color: silver;
  display: flex;
}

div.rechercheBarMobile {
  display: none;
}

div.filters {
  background-color: skyblue;
  display: flex;
  flex-wrap: wrap;
}

div.filterRelou {
  display: flex;
  flex-wrap: wrap;
}

div.filter {
  background-color: azure;
  display: flex;
}

div.headInformation {
  background-color: slateblue;
  display: flex;
}

article#container3 {
  background-color: lightgreen;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "article1 article2" "article3 article3";
  grid-area: articles;
}

section.article1 {
  background-color: peru;
  grid-area: article1;
  border-radius: 15px;
  margin: 15px;
}

aside.article2 {
  background-color: indianred;
  grid-area: article2;
  border-radius: 15px;
  margin: 15px;
}

section.article3 {
  background-color: darkslateblue;
  grid-area: article3;
}

footer.basDePage {
  background-color: gray;
  grid-area: basDePage;
}


/*Format tablette*/

@media screen and (max-width: 992px) and (min-width: 769px) {
  header.navBar {
    background-color: lightpink;
  }
}

<div id="container1">
  <header >
    <div >
      <div >Logo</div>
      <div ></div>
      <div >
        <nav>
          <a href="#">Hebergment</a>
          <a href="#">Activités</a>
        </nav>
      </div>
    </div>
  </header>
  <main id="container2">
    <section id="filtersContainer">
      <h1>trouver votre hébergement</h1>
      <p>En plain centre</p>
      <div >
        <i>icon</i>
        <p>Marseille,France</p>
        <p>bouton recherche</p>
      </div>
      <div >
        <i>icon</i>
        <p>Marseille,France</p>
        <i>icon loupe</i>
      </div>
      <div >
        <p>Filtres:</p>
        <div >
          <div >
            <i>icon</i>
            <p>Economique</p>
          </div>
          <div >
            <i>icon</i>
            <p>Famille</p>
          </div>
        </div>
        <div >
          <i>icon</i>
          <p>Romantique</p>
        </div>
        <div >
          <i>icon</i>
          <p>Animaux</p>
        </div>
      </div>
      <div >
        <i>icon</i>
        <p>plus de 500...</p>
      </div>
    </section>
    <article id="container3">
      <section >Hébergement</section>
      <aside >Les plus populaires</aside>
      <section >Activités à Marseille</section>
    </article>
  </main>
  <footer > pied de page </footer>
</div>