CSS 100% height with a row

Question

I want to make the row with the height 100%. However, the row cannot be done with 100% height( only work with fixed height px). How can i do to make the row to fit with 100%? (because i want to make the word_container centered vertically and horizontally in the 100% row's height).

  /* Grid */

.row {
    border-bottom: solid 1px transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row > * {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row:after, .row:before {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.row.uniform > * > :first-child {
    margin-top: 0;
}

.row.uniform > * > :last-child {
    margin-bottom: 0;
}

.row.\30 \25 > * {
    padding: 0 0 0 0px;
}

.row.\30 \25 {
    margin: 0 0 -1px 0px;
}

.row.uniform.\30 \25 > * {
    padding: 0px 0 0 0px;
}

.row.uniform.\30 \25 {
    margin: 0px 0 -1px 0px;
}

.row > * {
    padding: 0 0 0 40px;
}

.row {
    margin: 0 0 -1px -40px;
}

.row.uniform > * {
    padding: 40px 0 0 40px;
}

.row.uniform {
    margin: -40px 0 -1px -40px;
}

.row.\32 00\25 > * {
               padding: 0 0 0 80px;
           }

.row.\32 00\25 {
               margin: 0 0 -1px -80px;
           }

.row.uniform.\32 00\25 > * {
                       padding: 80px 0 0 80px;
                   }

.row.uniform.\32 00\25 {
                       margin: -80px 0 -1px -80px;
                   }

.row.\31 50\25 > * {
               padding: 0 0 0 60px;
           }

.row.\31 50\25 {
               margin: 0 0 -1px -60px;
           }

.row.uniform.\31 50\25 > * {
                       padding: 60px 0 0 60px;
                   }

.row.uniform.\31 50\25 {
                       margin: -60px 0 -1px -60px;
                   }

.row.\35 0\25 > * {
              padding: 0 0 0 20px;
          }

.row.\35 0\25 {
              margin: 0 0 -1px -20px;
          }

.row.uniform.\35 0\25 > * {
                      padding: 20px 0 0 20px;
                  }

.row.uniform.\35 0\25 {
                      margin: -20px 0 -1px -20px;
                  }

.row.\32 5\25 > * {
              padding: 0 0 0 10px;
          }

.row.\32 5\25 {
              margin: 0 0 -1px -10px;
          }

.row.uniform.\32 5\25 > * {
                      padding: 10px 0 0 10px;
                  }

.row.uniform.\32 5\25 {
                      margin: -10px 0 -1px -10px;
                  }

.\31 2u, .\31 2u\24 {
                   width: 100%;
                   clear: none;
                   margin-left: 0;
               }

.\31 1u, .\31 1u\24 {
                   width: 91.6666666667%;
                   clear: none;
                   margin-left: 0;
               }

.\31 0u, .\31 0u\24 {
                   width: 83.3333333333%;
                   clear: none;
                   margin-left: 0;
               }

.\39 u, .\39 u\24 {
    width: 75%;
    clear: none;
    margin-left: 0;
}

.\38 u, .\38 u\24 {
    width: 66.6666666667%;
    clear: none;
    margin-left: 0;
}

.\37 u, .\37 u\24 {
    width: 58.3333333333%;
    clear: none;
    margin-left: 0;
}

.\36 u, .\36 u\24 {
    width: 50%;
    clear: none;
    margin-left: 0;
}

.\35 u, .\35 u\24 {
    width: 41.6666666667%;
    clear: none;
    margin-left: 0;
}

.\34 u, .\34 u\24 {
    width: 33.3333333333%;
    clear: none;
    margin-left: 0;
}

.\33 u, .\33 u\24 {
    width: 25%;
    clear: none;
    margin-left: 0;
}

.\32 u, .\32 u\24 {
    width: 20%;
    clear: none;
    margin-left: 0;
}

.\31 u, .\31 u\24 {
    width:14.28%;
    clear: none;
    margin-left: 0;
}

.\31 2u\24 + *,
      .\31 1u\24 + *,
            .\31 0u\24 + *,
                  .\39 u\24 + *,
                  .\38 u\24 + *,
                  .\37 u\24 + *,
                  .\36 u\24 + *,
                  .\35 u\24 + *,
                  .\34 u\24 + *,
                  .\33 u\24 + *,
                  .\32 u\24 + *,
                  .\31 u\24 + * {
                      clear: left;
                  }

.\-11u {
    margin-left: 91.66667%;
}

.\-10u {
    margin-left: 83.33333%;
}

.\-9u {
    margin-left: 75%;
}

.\-8u {
    margin-left: 66.66667%;
}

.\-7u {
    margin-left: 58.33333%;
}

.\-6u {
    margin-left: 50%;
}

.\-5u {
    margin-left: 41.66667%;
}

.\-4u {
    margin-left: 33.33333%;
}

.\-3u {
    margin-left: 25%;
}

.\-2u {
    margin-left: 16.66667%;
}

.\-1u {
    margin-left: 8.33333%;
}



html,body{
    height:100%;
    min-height:100%;
    padding:0;
    margin:0;
}



#row1{
    border:1px solid red
    height:0%;
    margin:0;
    padding:0;

}
.word_position{

}
.word_container {
    width: 100%;

    text-align: center;
    position: absolute;
    left: 48%;
    top: 50%;

    /*width: auto;*/
    margin: 0px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

<div id="main">
    <div id="row1" class="row">

        <div class="6u 12u(mobile)">
            <div class="picture">
                <figure>
              
                </figure>
            </div>
        </div>


        <div class="6u 12u(mobile)">
            <div class="word_position">
                <div class="word_container">
                    <h1>12312342342442342sdsdf3</h1>
                </div>
            </div>
        </div>

    </div>
</div>

Here is the Demo

Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) and a multitude of similar answers found by searching SO. — Rob, Oct 02 '16 at 11:41

score 0 · Answer 1 · edited Oct 03 '16 at 11:14

The parent div #main needs to be height: 100%. With that it works for me.

/* Grid */

#main {
  height: 100%;
}
.row {
  border-bottom: solid 1px transparent;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
}
.row > * {
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.row:after,
.row:before {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
.row.uniform > * > :first-child {
  margin-top: 0;
}
.row.uniform > * > :last-child {
  margin-bottom: 0;
}
.row.\30 \25 > * {
  padding: 0 0 0 0px;
}
.row.\30 \25 {
  margin: 0 0 -1px 0px;
}
.row.uniform.\30 \25 > * {
  padding: 0px 0 0 0px;
}
.row.uniform.\30 \25 {
  margin: 0px 0 -1px 0px;
}
.row > * {
  padding: 0 0 0 40px;
}
.row {
  margin: 0 0 -1px -40px;
}
.row.uniform > * {
  padding: 40px 0 0 40px;
}
.row.uniform {
  margin: -40px 0 -1px -40px;
}
.row.\32 00\25 > * {
  padding: 0 0 0 80px;
}
.row.\32 00\25 {
  margin: 0 0 -1px -80px;
}
.row.uniform.\32 00\25 > * {
  padding: 80px 0 0 80px;
}
.row.uniform.\32 00\25 {
  margin: -80px 0 -1px -80px;
}
.row.\31 50\25 > * {
  padding: 0 0 0 60px;
}
.row.\31 50\25 {
  margin: 0 0 -1px -60px;
}
.row.uniform.\31 50\25 > * {
  padding: 60px 0 0 60px;
}
.row.uniform.\31 50\25 {
  margin: -60px 0 -1px -60px;
}
.row.\35 0\25 > * {
  padding: 0 0 0 20px;
}
.row.\35 0\25 {
  margin: 0 0 -1px -20px;
}
.row.uniform.\35 0\25 > * {
  padding: 20px 0 0 20px;
}
.row.uniform.\35 0\25 {
  margin: -20px 0 -1px -20px;
}
.row.\32 5\25 > * {
  padding: 0 0 0 10px;
}
.row.\32 5\25 {
  margin: 0 0 -1px -10px;
}
.row.uniform.\32 5\25 > * {
  padding: 10px 0 0 10px;
}
.row.uniform.\32 5\25 {
  margin: -10px 0 -1px -10px;
}
.\31 2u,
.\31 2u\24 {
  width: 100%;
  clear: none;
  margin-left: 0;
}
.\31 1u,
.\31 1u\24 {
  width: 91.6666666667%;
  clear: none;
  margin-left: 0;
}
.\31 0u,
.\31 0u\24 {
  width: 83.3333333333%;
  clear: none;
  margin-left: 0;
}
.\39 u,
.\39 u\24 {
  width: 75%;
  clear: none;
  margin-left: 0;
}
.\38 u,
.\38 u\24 {
  width: 66.6666666667%;
  clear: none;
  margin-left: 0;
}
.\37 u,
.\37 u\24 {
  width: 58.3333333333%;
  clear: none;
  margin-left: 0;
}
.\36 u,
.\36 u\24 {
  width: 50%;
  clear: none;
  margin-left: 0;
}
.\35 u,
.\35 u\24 {
  width: 41.6666666667%;
  clear: none;
  margin-left: 0;
}
.\34 u,
.\34 u\24 {
  width: 33.3333333333%;
  clear: none;
  margin-left: 0;
}
.\33 u,
.\33 u\24 {
  width: 25%;
  clear: none;
  margin-left: 0;
}
.\32 u,
.\32 u\24 {
  width: 20%;
  clear: none;
  margin-left: 0;
}
.\31 u,
.\31 u\24 {
  width: 14.28%;
  clear: none;
  margin-left: 0;
}
.\31 2u\24 + *,
.\31 1u\24 + *,
.\31 0u\24 + *,
.\39 u\24 + *,
.\38 u\24 + *,
.\37 u\24 + *,
.\36 u\24 + *,
.\35 u\24 + *,
.\34 u\24 + *,
.\33 u\24 + *,
.\32 u\24 + *,
.\31 u\24 + * {
  clear: left;
}
.\-11u {
  margin-left: 91.66667%;
}
.\-10u {
  margin-left: 83.33333%;
}
.\-9u {
  margin-left: 75%;
}
.\-8u {
  margin-left: 66.66667%;
}
.\-7u {
  margin-left: 58.33333%;
}
.\-6u {
  margin-left: 50%;
}
.\-5u {
  margin-left: 41.66667%;
}
.\-4u {
  margin-left: 33.33333%;
}
.\-3u {
  margin-left: 25%;
}
.\-2u {
  margin-left: 16.66667%;
}
.\-1u {
  margin-left: 8.33333%;
}
html,
body {
  height: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}
#row1 {
  border: 1px solid red height: 0%;
  margin: 0;
  padding: 0;
}
.word_position {} .word_container {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 48%;
  top: 50%;
  /*width: auto;*/
  margin: 0px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div id="main">
  <div id="row1" class="row">

    <div class="6u 12u(mobile)">
      <div class="picture">
        <figure>

        </figure>
      </div>
    </div>


    <div class="6u 12u(mobile)">
      <div class="word_position">
        <div class="word_container">
          <h1>12312342342442342sdsdf3</h1>
        </div>
      </div>
    </div>

  </div>

</div>

You example solution is required to be posted here, not a third-party site that can change or disappear tomorrow helping no one. — Rob, Oct 02 '16 at 11:42

score 0 · Answer 2 · answered Oct 01 '16 at 15:14

This should work

  /* Grid */

        .row {
            border-bottom: solid 1px transparent;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .row > * {
            float: left;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .row:after, .row:before {
            content: '';
            display: block;
            clear: both;
            height: 0;
        }

        .row.uniform > * > :first-child {
            margin-top: 0;
        }

        .row.uniform > * > :last-child {
            margin-bottom: 0;
        }

        .row.\30 \25 > * {
            padding: 0 0 0 0px;
        }

        .row.\30 \25 {
            margin: 0 0 -1px 0px;
        }

        .row.uniform.\30 \25 > * {
            padding: 0px 0 0 0px;
        }

        .row.uniform.\30 \25 {
            margin: 0px 0 -1px 0px;
        }

        .row > * {
            padding: 0 0 0 40px;
        }

        .row {
            margin: 0 0 -1px -40px;
        }

        .row.uniform > * {
            padding: 40px 0 0 40px;
        }

        .row.uniform {
            margin: -40px 0 -1px -40px;
        }

        .row.\32 00\25 > * {
                       padding: 0 0 0 80px;
                   }

        .row.\32 00\25 {
                       margin: 0 0 -1px -80px;
                   }

        .row.uniform.\32 00\25 > * {
                               padding: 80px 0 0 80px;
                           }

        .row.uniform.\32 00\25 {
                               margin: -80px 0 -1px -80px;
                           }

        .row.\31 50\25 > * {
                       padding: 0 0 0 60px;
                   }

        .row.\31 50\25 {
                       margin: 0 0 -1px -60px;
                   }

        .row.uniform.\31 50\25 > * {
                               padding: 60px 0 0 60px;
                           }

        .row.uniform.\31 50\25 {
                               margin: -60px 0 -1px -60px;
                           }

        .row.\35 0\25 > * {
                      padding: 0 0 0 20px;
                  }

        .row.\35 0\25 {
                      margin: 0 0 -1px -20px;
                  }

        .row.uniform.\35 0\25 > * {
                              padding: 20px 0 0 20px;
                          }

        .row.uniform.\35 0\25 {
                              margin: -20px 0 -1px -20px;
                          }

        .row.\32 5\25 > * {
                      padding: 0 0 0 10px;
                  }

        .row.\32 5\25 {
                      margin: 0 0 -1px -10px;
                  }

        .row.uniform.\32 5\25 > * {
                              padding: 10px 0 0 10px;
                          }

        .row.uniform.\32 5\25 {
                              margin: -10px 0 -1px -10px;
                          }

        .\31 2u, .\31 2u\24 {
                           width: 100%;
                           clear: none;
                           margin-left: 0;
                       }

        .\31 1u, .\31 1u\24 {
                           width: 91.6666666667%;
                           clear: none;
                           margin-left: 0;
                       }

        .\31 0u, .\31 0u\24 {
                           width: 83.3333333333%;
                           clear: none;
                           margin-left: 0;
                       }

        .\39 u, .\39 u\24 {
            width: 75%;
            clear: none;
            margin-left: 0;
        }

        .\38 u, .\38 u\24 {
            width: 66.6666666667%;
            clear: none;
            margin-left: 0;
        }

        .\37 u, .\37 u\24 {
            width: 58.3333333333%;
            clear: none;
            margin-left: 0;
        }

        .\36 u, .\36 u\24 {
            width: 50%;
            clear: none;
            margin-left: 0;
        }

        .\35 u, .\35 u\24 {
            width: 41.6666666667%;
            clear: none;
            margin-left: 0;
        }

        .\34 u, .\34 u\24 {
            width: 33.3333333333%;
            clear: none;
            margin-left: 0;
        }

        .\33 u, .\33 u\24 {
            width: 25%;
            clear: none;
            margin-left: 0;
        }

        .\32 u, .\32 u\24 {
            width: 20%;
            clear: none;
            margin-left: 0;
        }

        .\31 u, .\31 u\24 {
            width:14.28%;
            clear: none;
            margin-left: 0;
        }

        .\31 2u\24 + *,
              .\31 1u\24 + *,
                    .\31 0u\24 + *,
                          .\39 u\24 + *,
                          .\38 u\24 + *,
                          .\37 u\24 + *,
                          .\36 u\24 + *,
                          .\35 u\24 + *,
                          .\34 u\24 + *,
                          .\33 u\24 + *,
                          .\32 u\24 + *,
                          .\31 u\24 + * {
                              clear: left;
                          }

        .\-11u {
            margin-left: 91.66667%;
        }

        .\-10u {
            margin-left: 83.33333%;
        }

        .\-9u {
            margin-left: 75%;
        }

        .\-8u {
            margin-left: 66.66667%;
        }

        .\-7u {
            margin-left: 58.33333%;
        }

        .\-6u {
            margin-left: 50%;
        }

        .\-5u {
            margin-left: 41.66667%;
        }

        .\-4u {
            margin-left: 33.33333%;
        }

        .\-3u {
            margin-left: 25%;
        }

        .\-2u {
            margin-left: 16.66667%;
        }

        .\-1u {
            margin-left: 8.33333%;
        }



        html,body{
            height:100%;
            min-height:100%;
            padding:0;
            margin:0;
        }


        #main {
            height: 100%;
        }
        #row1{
border:1px solid red
            height:0%;
            margin:0;
            padding:0;

        }
        .word_position{

        }
        .word_container {
            width: 100%;
            text-align: center;
            position: absolute;
            left: 48%;
            top: 50%;

            /*width: auto;*/
            margin: 0px;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }

<div id="main">
    <div id="row1" class="row">

        <div class="6u 12u(mobile)">
            <div class="picture">
                <figure>
              
                </figure>
            </div>
        </div>


        <div class="6u 12u(mobile)">
            <div class="word_position">
                <div class="word_container">
                    <h1>12312342342442342sdsdf3</h1>
                </div>
            </div>
        </div>

    </div>

</div>

CSS 100% height with a row

2 Answers2