CODEWITHSUNDEEP
htmlcssflexbox
rawturtle
rawturtle

Reputation: 79

Make flexbox rows take up 100% of browser height

I have the following layout on my page. 

<html>
    <body>
        <section id="wrapper">
            <section id="flexbox">
                <section id="page1">  </section>
                <section id="page2">  </section>
            </section>
        </section>
    </body>
</html>

I want the sections page1 and page2 to fill the entire browser height. I want to see page1 then scroll down to see page2.

Additional notes:

body and html heights are set to 100%.

Wrapper has block styling.

The flexbox has no-wrap and is set to columns.

Upvotes: 0

Views: 39

Answers (1)

Adam
Adam

Reputation: 1383

Add 100vh to the each element.

you can read more about it here Viewport units 

#page1,
#page2 {
  height: 100vh;
}

#page1 {
  background: #ff0;
}

#page2 {
  background: #f00;
}
<section id="wrapper">
  <section id="flexbox">
    <section id="page1"></section>
    <section id="page2"></section>
  </section>
</section>

Upvotes: 1

Related Questions