Css 多个 DIV 高度和宽度为 100%

Question

我有三个div。但是，第三个div不能利用整个宽度100%和高度100%。谁能告诉我为什么？在代码笔中，我已经突出显示了问题。非常感谢。

/* 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.  > * {
  padding: 0 0 0 0px;
}
.row.  {
  margin: 0 0 -1px 0px;
}
.row.uniform.  > * {
  padding: 0px 0 0 0px;
}
.row.uniform.  {
  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. 00 > * {
  padding: 0 0 0 80px;
}
.row. 00 {
  margin: 0 0 -1px -80px;
}
.row.uniform. 00 > * {
  padding: 80px 0 0 80px;
}
.row.uniform. 00 {
  margin: -80px 0 -1px -80px;
}
.row. 50 > * {
  padding: 0 0 0 60px;
}
.row. 50 {
  margin: 0 0 -1px -60px;
}
.row.uniform. 50 > * {
  padding: 60px 0 0 60px;
}
.row.uniform. 50 {
  margin: -60px 0 -1px -60px;
}
.row. 0 > * {
  padding: 0 0 0 20px;
}
.row. 0 {
  margin: 0 0 -1px -20px;
}
.row.uniform. 0 > * {
  padding: 20px 0 0 20px;
}
.row.uniform. 0 {
  margin: -20px 0 -1px -20px;
}
.row. 5 > * {
  padding: 0 0 0 10px;
}
.row. 5 {
  margin: 0 0 -1px -10px;
}
.row.uniform. 5 > * {
  padding: 10px 0 0 10px;
}
.row.uniform. 5 {
  margin: -10px 0 -1px -10px;
}
. 2u,
. 2u {
  width: 100%;
  clear: none;
  margin-left: 0;
}
. 1u,
. 1u {
  width: 91.6666666667%;
  clear: none;
  margin-left: 0;
}
. 0u,
. 0u {
  width: 83.3333333333%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 75%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 66.6666666667%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 58.3333333333%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 50%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 41.6666666667%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 33.3333333333%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 25%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 20%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  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。否则body只会和你的内容一样高

/* 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.  > * {
  padding: 0 0 0 0px;
}
.row.  {
  margin: 0 0 -1px 0px;
}
.row.uniform.  > * {
  padding: 0px 0 0 0px;
}
.row.uniform.  {
  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. 00 > * {
  padding: 0 0 0 80px;
}
.row. 00 {
  margin: 0 0 -1px -80px;
}
.row.uniform. 00 > * {
  padding: 80px 0 0 80px;
}
.row.uniform. 00 {
  margin: -80px 0 -1px -80px;
}
.row. 50 > * {
  padding: 0 0 0 60px;
}
.row. 50 {
  margin: 0 0 -1px -60px;
}
.row.uniform. 50 > * {
  padding: 60px 0 0 60px;
}
.row.uniform. 50 {
  margin: -60px 0 -1px -60px;
}
.row. 0 > * {
  padding: 0 0 0 20px;
}
.row. 0 {
  margin: 0 0 -1px -20px;
}
.row.uniform. 0 > * {
  padding: 20px 0 0 20px;
}
.row.uniform. 0 {
  margin: -20px 0 -1px -20px;
}
.row. 5 > * {
  padding: 0 0 0 10px;
}
.row. 5 {
  margin: 0 0 -1px -10px;
}
.row.uniform. 5 > * {
  padding: 10px 0 0 10px;
}
.row.uniform. 5 {
  margin: -10px 0 -1px -10px;
}
. 2u,
. 2u {
  width: 100%;
  clear: none;
  margin-left: 0;
}
. 1u,
. 1u {
  width: 91.6666666667%;
  clear: none;
  margin-left: 0;
}
. 0u,
. 0u {
  width: 83.3333333333%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 75%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 66.6666666667%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 58.3333333333%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 50%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 41.6666666667%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 33.3333333333%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 25%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  width: 20%;
  clear: none;
  margin-left: 0;
}
. u,
. u {
  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;

Css 多个 DIV 高度和宽度为 100%

Css many DIV with 100% height and width

html

css

height

width