CODEWITHSUNDEEP
htmlcssflexbox
kojow7
kojow7

Reputation: 11424

Using flexbox and 100% height

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

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?

Upvotes: 1

Views: 81

Answers (2)

user7148391
user7148391

Reputation:

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>

Upvotes: 2

kojow7
kojow7

Reputation: 11424

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>

Upvotes: 0

Related Questions