CSS/html: Trying to use flexbox to have a fixed height container at the bottom of page

Question

I am trying to use flexbox to have fixed height container ( two ) to be stuck to the bottom of the page and then have the other container take up the available space (flex-grow) . This is not giving me the desired effect so I'm not sure what I'm missing

<div class="container"> 
  
  <div class="one">One</div>
  
  <div class="two">Two</div>
  
</div> 


.container {
   height: 100%;
   display: flex;
   flex-direction: column;
   background: black;
}
.one { 
   flex-grow: 1;
   background: green
}
.two {
    height: 90px;
    background:pink;
}

score 1 · Answer 1 · answered Sep 09 '21 at 02:52

1

Your block is limited to the place it occupies. You have to use the entire viewport in this case. Add this in your CSS :

html, body {
  height: 100%;
}

answered Sep 09 '21 at 02:52

Christophe

366
3
3

score 1 · Answer 2 · answered Sep 09 '21 at 02:54

The main thing that would help is height:100vh. Apart from that, to avoid scrollbar, you'll need to remove default margin and padding from html & body.

The vh unit is pretty convenient when you want the container tag to fill the available screen space without introducing vertical scrollbar.

        html,
        body {
          margin: 0;
          padding: 0;
        }
        .container {
          height: 100vh;
          display: flex;
          flex-direction: column;
          background: black;
        }
        .one {
          flex-grow: 1;
          background: green;
        }
        .two {
          height: 90px;
          background: pink;
        }

        <html>

        <body>
          <div class="container">
            <div class="one">One</div>
            <div class="two">Two</div>
          </div>
        </body>

        </html>

NcXNaV · Accepted Answer · 2021-09-09T03:03:37.323

Height (%) is used to define a height relative to parent's height. It depends on parent element height so you also need to set height:100% to html/body.

body, html{
  height: 100%;
}

.container {
   height: 100%;
   display: flex;
   flex-direction: column;
   background: black;
}
.one { 
   flex-grow: 1;
   background: green
}
.two {
    height: 90px;
    background:pink;
}

<div class="container"> 
  
  <div class="one">One</div>
  
  <div class="two">Two</div>
  
</div>

CSS/html: Trying to use flexbox to have a fixed height container at the bottom of page

3 Answers3