How do you use Flexbox to fill all the empty space on the bottom of the page?-CodePudding

This is my code :

.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  flex: 1;
  background-color: pink;
}

<div >
  <div >
    <p>This is a test!</p>
  </div>
</div>

However, this just creates a box that says "This is a test!" and underneath the pink box is just a bunch of empty white space. I want the flex box to completely fill everything under it with pink. How do I do this?

I already tried align-items: stretch, and a billion other methods but I just can't seem to get it to work.

I am still new to flexbox so please let me know if I may be missing some fundamental.

CodePudding user response：

add the background-color directly to the flex-container. Also you should add a min-height like min-height: 100vh. By default the flex-container will only use a aheight to fit-content.

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
  min-height: 100vh;
}

.main {
  flex: 1;  
}

body {
  margin: 0;
}

<div >
  <div >
    <p>This is a test!</p>
  </div>
</div>

CodePudding user response：

So in order for the children .main div to stretch full height, the parent .content needs to have a defined height. Easiest way to do this, is to add a min-height (minimum height) to it. In your case, you want it to stretch across the entire page if I got you right, so we add a minimum height of 100vh. Here "vh" unit stands for viewport height (more on CSS units).

Now that we have made the content go full height, there are 2 ways to make the child .main div cover the entire area of the "flexbox" .content. Either you use align-items: stretch on the .content (parent), or you can use align-self: stretch on the child .main.

Here I have used the 2nd option. Both works same in your case, but if you need to place other items, then you might choose one over the other method.

.content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height:100vh;
}

.main {
    flex: 1;
    background-color: pink;
    align-self:stretch;
}

<div >
    <div >
        <p>This is a test!</p>
    </div>
</div>

Note: If you run the example here, you might see there is a white border around the pink area, which is coming from the body of HTML having a default padding/margin. To get rid of this, you can add a padding:0; margin:0; on the body element. But this isn't related to your actual question or solution.

CodePudding user response：

The unit vh is base on the View Height. So if you want to fill all the view height of your view port(Your screen), use height: 100vh;.

For the width, is thw same thing but with the unit 'vw' (View Width).

Here is the documentation on HTML Units