具有 100% 高度和宽度的 Css 许多 DIV

Question

我有三个 div。但是，第三个 div 不能使用 100% 的整个宽度和 100% 的高度。谁能告诉我为什么？在 codepen 中，我已经强调了这些问题。非常感谢。

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

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

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


  </div>
</div>

Answer 1

你有这个规则：

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

这意味着.row 的每个直接子级都有一个正确的填充。只需将填充设置为零：

#Word_wrapper {
    padding: 0;
}

你将拥有整个宽度。要获得高度，您只需在示例中将100% 应用于body 和html。否则，正文将仅与您的内容一样高。

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

Answer 2

要显示 div，您必须指定 float: left 和 float: right;