How have 2 sections fill full page with header / main / footer in grid-CodePudding

hello everyone,

I need help, I would like have 2 sections in my <main> and I would like that the first section fill the full page and if I scroll I have the second section fill full page again. So I have test this :

html, body {
 width: 100%;
 height: 100%;
 margin: 0;
}

.container {
 display: grid;
 grid-template-rows: auto 1fr auto;
 grid-template-columns: 100%;
 min-height: 100%;
}

header,
footer {
  height: 100px;
  background-color: rgba(0,0,0,0.7);
}

header {
}

main {
}

section {
    display: block;
    background: #CFF;
}

.one {
    background: red;
    height: 100%;
}

.two {
    background: cyan;
    height: 100%;
}

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>
     <div class="container">
         <header></header>
         <main>
           <section class="one"></section>
           <section class="two"></section>
         </main>
         <footer></footer>
     </div>
  </body>
</html>

as you can see my footer is at the bottom of the first section but I would like he go at the real bottom of the second section. And if it's possible I would like fixed my header but if I put position : fixed; in the header {} my header is hidden ??

sorry for my bad english.

Can you please help me, have a nice day !

CodePudding user response：

First get rid of all the height: 100% in no case they would work at all with your declarations.
No need for grid here.
just add: .one { height: calc(100vh - 100px);
add .two { height: calc(100vs - 200px);to subtrate both the footer and header height.
add: header { position: sticky; }. this will not move the header out of the flow by default. it will stick to the top though.

as both your footer and header has a fixed height of 100px you can use the calc function to size both sections that way.

html, body {
 margin: 0;
}


header,
footer {
  height: 100px;
  background-color: rgba(0,0,0,0.7);
}

header {
  position: sticky;
  top: 0;
}

section {
    display: block;
    background: #CFF;
}

.one {
    background: red;
    height: calc(100vh - 100px);
}

.two {
    background: cyan;
    height: calc(100vh - 200px);
}

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>
     <div class="container">
         <header></header>
         <main>
           <section class="one"></section>
           <section class="two"></section>
         </main>
         <footer></footer>
     </div>
  </body>
</html>

CodePudding user response：

*{
margin:0;
padding:0;
}
header {
position: fixed;
height: 20vh;
width: 100vw;
z-index: 1;
background-color: black;
}

section {
    display: block;
    background: #CFF;
    
}

.one {
    top:20vh;
    background: red;
    height: 100vh;
}

.two {
    background: cyan;
    height: 100vh;
}
footer{
height: 20vh;
background-color: blue;
}

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>
     <div class="container">
         <header>434343</header>
         <main>
           <section class="one"></section>
           <section class="two"></section>
         </main>
         <footer></footer>
     </div>
  </body>
</html>

You can use the property height: 100vh; to set the height of any div the height of viewport. The 100vh is used to fix the height of an element or div the height of screen or viewport. I have fixed your "position: fixed" problem too. Now you can scroll and your header will be visible. You can achieve this by fixing your header's width and height as I have fixed.

CodePudding user response：

In this case You can easily, change percentage to vh units in section one and section two classes. That's it ! Here You can read more about units. Set position: sticky and top: 0 on header selector, to make your navigation work as You wish ;)

html, body {
 width: 100%;
 height: 100%;
 margin: 0;
}

.container {
 display: grid;
 grid-template-rows: auto 1fr auto;
 grid-template-columns: 100%;
 min-height: 100%;
}

header,
footer {
  height: 100px;
  background-color: rgba(0,0,0,0.7);
}

header {
 position: sticky;
 top: 0;
}

main {
}

section {
    display: block;
    background: #CFF;
}

.one {
    background: red;
    height: 100vh;
}

.two {
    background: cyan;
    height: 100vh;
}

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>
     <div class="container">
         <header></header>
         <main>
           <section class="one"></section>
           <section class="two"></section>
         </main>
         <footer></footer>
     </div>
  </body>
</html>