Блог

Главная - Вопросы по программированию - Css много DIV со 100% высотой и шириной

Css много DIV со 100% высотой и шириной

#html #css #height #width

#HTML #css #высота #ширина

Вопрос:

У меня три 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 0025 > * {
  padding: 0 0 0 80px;
}
.row.32 0025 {
  margin: 0 0 -1px -80px;
}
.row.uniform.32 0025 > * {
  padding: 80px 0 0 80px;
}
.row.uniform.32 0025 {
  margin: -80px 0 -1px -80px;
}
.row.31 5025 > * {
  padding: 0 0 0 60px;
}
.row.31 5025 {
  margin: 0 0 -1px -60px;
}
.row.uniform.31 5025 > * {
  padding: 60px 0 0 60px;
}
.row.uniform.31 5025 {
  margin: -60px 0 -1px -60px;
}
.row.35 025 > * {
  padding: 0 0 0 20px;
}
.row.35 025 {
  margin: 0 0 -1px -20px;
}
.row.uniform.35 025 > * {
  padding: 20px 0 0 20px;
}
.row.uniform.35 025 {
  margin: -20px 0 -1px -20px;
}
.row.32 525 > * {
  padding: 0 0 0 10px;
}
.row.32 525 {
  margin: 0 0 -1px -10px;
}
.row.uniform.32 525 > * {
  padding: 10px 0 0 10px;
}
.row.uniform.32 525 {
  margin: -10px 0 -1px -10px;
}
.31 2u,
.31 2u24 {
  width: 100%;
  clear: none;
  margin-left: 0;
}
.31 1u,
.31 1u24 {
  width: 91.6666666667%;
  clear: none;
  margin-left: 0;
}
.31 0u,
.31 0u24 {
  width: 83.3333333333%;
  clear: none;
  margin-left: 0;
}
.39 u,
.39 u24 {
  width: 75%;
  clear: none;
  margin-left: 0;
}
.38 u,
.38 u24 {
  width: 66.6666666667%;
  clear: none;
  margin-left: 0;
}
.37 u,
.37 u24 {
  width: 58.3333333333%;
  clear: none;
  margin-left: 0;
}
.36 u,
.36 u24 {
  width: 50%;
  clear: none;
  margin-left: 0;
}
.35 u,
.35 u24 {
  width: 41.6666666667%;
  clear: none;
  margin-left: 0;
}
.34 u,
.34 u24 {
  width: 33.3333333333%;
  clear: none;
  margin-left: 0;
}
.33 u,
.33 u24 {
  width: 25%;
  clear: none;
  margin-left: 0;
}
.32 u,
.32 u24 {
  width: 20%;
  clear: none;
  margin-left: 0;
}
.31 u,
.31 u24 {
  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>

Комментарии:

1. Какой div вы имеете в виду? Что word_container ?

Ответ №1:

У вас есть это правило:

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

Это означает, что каждый прямой потомок a .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 0025 > * {
  padding: 0 0 0 80px;
}
.row.32 0025 {
  margin: 0 0 -1px -80px;
}
.row.uniform.32 0025 > * {
  padding: 80px 0 0 80px;
}
.row.uniform.32 0025 {
  margin: -80px 0 -1px -80px;
}
.row.31 5025 > * {
  padding: 0 0 0 60px;
}
.row.31 5025 {
  margin: 0 0 -1px -60px;
}
.row.uniform.31 5025 > * {
  padding: 60px 0 0 60px;
}
.row.uniform.31 5025 {
  margin: -60px 0 -1px -60px;
}
.row.35 025 > * {
  padding: 0 0 0 20px;
}
.row.35 025 {
  margin: 0 0 -1px -20px;
}
.row.uniform.35 025 > * {
  padding: 20px 0 0 20px;
}
.row.uniform.35 025 {
  margin: -20px 0 -1px -20px;
}
.row.32 525 > * {
  padding: 0 0 0 10px;
}
.row.32 525 {
  margin: 0 0 -1px -10px;
}
.row.uniform.32 525 > * {
  padding: 10px 0 0 10px;
}
.row.uniform.32 525 {
  margin: -10px 0 -1px -10px;
}
.31 2u,
.31 2u24 {
  width: 100%;
  clear: none;
  margin-left: 0;
}
.31 1u,
.31 1u24 {
  width: 91.6666666667%;
  clear: none;
  margin-left: 0;
}
.31 0u,
.31 0u24 {
  width: 83.3333333333%;
  clear: none;
  margin-left: 0;
}
.39 u,
.39 u24 {
  width: 75%;
  clear: none;
  margin-left: 0;
}
.38 u,
.38 u24 {
  width: 66.6666666667%;
  clear: none;
  margin-left: 0;
}
.37 u,
.37 u24 {
  width: 58.3333333333%;
  clear: none;
  margin-left: 0;
}
.36 u,
.36 u24 {
  width: 50%;
  clear: none;
  margin-left: 0;
}
.35 u,
.35 u24 {
  width: 41.6666666667%;
  clear: none;
  margin-left: 0;
}
.34 u,
.34 u24 {
  width: 33.3333333333%;
  clear: none;
  margin-left: 0;
}
.33 u,
.33 u24 {
  width: 25%;
  clear: none;
  margin-left: 0;
}
.32 u,
.32 u24 {
  width: 20%;
  clear: none;
  margin-left: 0;
}
.31 u,
.31 u24 {
  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>

Ответ №2:

Для отображения div необходимо назначить float: left и float: right;