Make a Section take up full screen without disturbing the footer

Question

I want to make a section from my main tag take up full screen but when I am doing this, my footer overlays the following sections after the first one. How can I resolve this without the method of setting the height of the section to 100vh, because i know this will provoke issues while scrolling on mobile.

Here is a sample code:

* {
  margin: 0;
  padding: 0;
}

html,
body,
main {
  height: 100%;
}

header {
  background: yellowgreen;
  padding: 5% 0;
  position: fixed;
  z-index: 2;
  width: 100%;
}

.section1 {
  height: 100%;
  background-color: rgb(83, 200, 247);
}

.section2 {
  background-color: pink;
}

.section3 {
  background-color: red;
}

footer {
  background: rgb(53, 53, 53);
  color: white;
  height: 10%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <header>
        This is header.
    </header>

    <main>
        <section class="section1">
            This is Section 1.
        </section>
        <section class="section2">
            This is Section 2.
        </section>
        <section class="section3">
            This is Section 3.
        </section>
    </main>

    <footer>
        This is footer.
    </footer>
    
</body>
</html>

how will 100vh provoke issue on mobile phones? How about `position: absolute/fixed; top: 0; bottom: 0;`? — tacoshy, Feb 13 '21 at 18:55
These are the issues i am talking about: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser Also, making the position absolute will just make the section one be overrode by the other ones — Gabriel Tudor, Feb 13 '21 at 19:06

DCR · Answer 1 · 2021-02-13T22:31:56.283

Use flexbox! it's made for this kind of thing. Note, we do not specify the height of the section but rather only the height of the container. This may be adjusted as needed.

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex-grow: 1;
  display:flex;
  flex-direction:column;
 
}

header {
  background: yellowgreen;
  padding: 5% 0;
  height:10%;
  z-index: 2;
  width: 100%;
}

.section1 {

  flex:1;
  background-color: rgb(83, 200, 247);
}
.section2 {
  flex:1;
  background-color: pink;
}

.section3 {
  flex:2;
  background-color: red;
}

footer {
  background: rgb(53, 53, 53);
  color: white;
  height: 10%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    
    <header>
        This is header.
    </header>

    <main>
        <section class="section1">
            This is Section 1.
        </section>
        <section class="section2">
            This is Section 2.
        </section>
        <section class="section3">
            This is Section 3.
        </section>
    </main>

    <footer>
        This is footer.
    </footer>
   
    
    
</body>
</html>

It still doesn't work. I updated the code from above and the footer is still showing after the section1 — Gabriel Tudor, Feb 13 '21 at 21:23

score 0 · Answer 2 · edited Feb 13 '21 at 22:26

When I try to use flexbox, the same thing is happening. Do I need to wrap the header, main and footer section in another div ?

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex-grow: 1;
 
}

header {
  background: yellowgreen;
  padding: 5% 0;
 
  z-index: 2;
  width: 100%;
}

.section1 {
  
  background-color: rgb(83, 200, 247);
}

.section2 {
  height: 25%;
  background-color: pink;
}

.section3 {
 
  background-color: red;
}

footer {
  background: rgb(53, 53, 53);
  color: white;
  height: 10%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    
    <header>
        This is header.
    </header>

    <main>
        <section class="section1">
            This is Section 1.
        </section>
        <section class="section2">
            This is Section 2.
        </section>
        <section class="section3">
            This is Section 3.
        </section>
    </main>

    <footer>
        This is footer.
    </footer>
   
    
    
</body>
</html>

I updated my snippet with your information. It looks like it's doing what you are looking for. — DCR, Feb 13 '21 at 22:31

Make a Section take up full screen without disturbing the footer

2 Answers2