philiplts188 philiplts188 - 2 months ago 20
CSS Question

Css many DIV with 100% height and width

I have three div. However, the third div cannot utilize the whole width 100% and height 100%. Can anyone tell me why? In the codepen, I have already highlighted the problems. Thanks a lot.

http://codepen.io/anon/pen/VKyYRr

CSS:

/* 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;
}







#row1{
border:1px solid red;
height:50%;
margin:auto;

}
#Word_wrapper{
border:1px solid blue;
height:100%;
}
.word_container{
border:1px solid blue;
height:100%;
margin:auto;

}


HTML:

<div id="row1" class="row">
<div id="Word_wrapper"class="12u 12u(mobile)">
<div class="word_container">
<h1>Hello</h1>
</div>


</div>
</div>

Answer

You have this rule:

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

That means every direct child of a .row has a right padding. Just set the padding to zero:

#Word_wrapper {
    padding: 0;
}

And you will have the whole width. To gain the height, you will just have to apply 100% to body and html in your example. Otherwise, the body will only be as high as your content.

/* 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;
}
html, body {
  height: 100%;
}

#row1 {
  border: 1px solid red;
  height: 50%;
  margin: auto;
}
#Word_wrapper {
  border: 1px solid blue;
  height: 100%;
  padding: 0;
}
.word_container {
  border: 1px solid blue;
  height: 100%;
  margin: auto;
}
<div id="row1" class="row">
  <div id="Word_wrapper" class="12u 12u(mobile)">
    <div class="word_container">
      <h1>Hello</h1>
    </div>


  </div>
</div>

Comments