Using flexbox and 100% height

Question

I am using flexbox and trying to get six divs to take up the remaining height of the page. Two issues I am having:

I am having trouble getting the six divs to take up the remainder of the height, but no more.
I am getting a white margin at the top of the page

My code looks like this:

<!DOCTYPE html>
<html>
<style>

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;

}

h2 {
    text-align: center;
}

#all {
    background-color: red;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#main {
    display: flex;
    width: 80%;
    margin: 10px auto;
    height: 100%;
}

.category {
    border: solid black 2px;
    flex: 1;
    flex-grow: 1;
    margin: 0px 20px;
    height: 100%;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

</style>
<div id="all">
  <h2>My page</h2>
  <div id="main">

    <div class="category">Category 1</div>
    <div class="category">Category 2</div>
    <div class="category">Category 3</div>
    <div class="category">Category 4</div>
    <div class="category">Category 5</div>
    <div class="category">Category 6</div>

  </div>
</div>
</html>

I have tried using various styles such as flex-grow, stretch, and height of 100% to the body. However, none of these seem to be doing the trick. What am I doing wrong?

The white space at the top is caused by the margin on the `h2` — yaakov, May 04 '18 at 20:05
Hmm, you seem to be correct, but why is this the case when the h2 is contained within the div? It seems that the margin of the h2 is appearing outside of the div. There also seems to be still a tiny margin if I remove the div. — kojow7, May 04 '18 at 20:10
So you are saying that margins of children objects appear outside of the parent div they are contained within? — kojow7, May 04 '18 at 20:11

score 2 · Answer 1 · answered May 04 '18 at 20:18

The white space on the top caused by the default margins, you remove those with

*{
    margin:0;
}

The one in the bottom caused by the height: 100%; on the main container see that it's display is flex it'll 100% height of the viewports height, but since there's an h1 pushing, the #main is being pushed therefore the children with height 100% are pushed aswell, you can either remove the height 100% from the #all or remove h1.

I removed the height 100% from #id, because an element's height should be defined by it's content.

*{
    margin:0;
    box-sizing:border-box;
}

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;

}
h2 {
    text-align: center;
}

#all {
    background-color: red;
    width: 100%;
    /* height: 100%; */
    margin: 0px;
    padding: 0px;
}

#main {
    display: flex;
    width: 80%;
    margin: 10px auto;
    height: 100%;
}

.category {
    border: solid black 2px;
    flex: 1;
    flex-grow: 1;
    margin: 0px 20px;
    height: 100%;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

<div id="all">
  <h2>My page</h2>
  <div id="main">

    <div class="category">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="category">Category 2</div>
    <div class="category">Category 3</div>
    <div class="category">Category 4</div>
    <div class="category">Category 5</div>
    <div class="category">Category 6</div>

  </div>
</div>

You may notice a slight white space on the bottom, that is cause by your 20px margin, that i didn't remove, which is not really necessary — Rainbow, May 04 '18 at 20:22
Nice solution. You can also link into your site this "reset" stylesheet. There are many others. [reset.css](https://meyerweb.com/eric/tools/css/reset/reset.css) — Daniel Faure, May 04 '18 at 20:30
Looking at your code snippet, the boxes do not fill to the bottom of the browser window which is what I am after. I have posted another solution which seems to work. — kojow7, May 04 '18 at 20:37
Oh you wanted the boxes to fill the window even empty, well you didn't point that out, the question was about the white spaces. — Rainbow, May 04 '18 at 20:41
@ZohirSalakCeNa I'm pretty sure that was specified that a couple of times in my question including the first sentence and second bullet point. It was only the first bullet point that mentioned the white space. — kojow7, May 04 '18 at 21:44
Oh i'm sorry, well i suppose my answer only answers half of your question, however it would be helpful for someone with that particular issue. :) — Rainbow, May 04 '18 at 21:53

score 0 · Answer 2 · answered May 04 '18 at 20:16

I came up with the following solution. It requires using display: flex twice and to set the h2 to display as flex: 0 and the remainder to display as flex: 1.

<!DOCTYPE html>
<html>
<style>

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;

}


#all {
    background-color: red;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
}


h2 {
    flex: 0;
    text-align: center;
}

#main {
    display: flex;
    flex: 1;
    flex-direction: row;
    width: 80%;
    margin: 10px auto;
    height: 100%;
}

.category {
    border: solid black 2px;
    flex: 1;
    margin: 0px 20px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

</style>

<div id="all">
<h2>My page</h2>
  <div id="main">

    <div class="category">Category 1</div>
    <div class="category">Category 2</div>
    <div class="category">Category 3</div>
    <div class="category">Category 4</div>
    <div class="category">Category 5</div>
    <div class="category">Category 6</div>

  </div>
</div>
</html>

Using flexbox and 100% height

2 Answers2