Как разделять на два divs полный размер страницы html в любом разрешении?

Мой вопрос:

Как я могу делить на два div полный размер страницы html в любом разрешении?

А именно один div который мне заняли 50 % высоты страницы и другого, который мне занимали бы другой 50 %, который остается.

Это для того, чтобы мои контейнеры (divs) остались занимая всегда всю высоту страница (50 и 50 %).

4
задан 07.08.2017, 17:18
3 ответа

Используя процентное содержание podrГ-схвати делать что-то asГ-:

html, body{
  height: 100%;
  background-color: #000;
}

.contenedor{
  height: 49%;
  background-color: #6A737C;
  margin: 1% 1%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="contenedor">
    
  </div>
  <div class="contenedor">
    
  </div>
</body>
</html>

Надеялся, что он подает тебя.

5
ответ дан 24.11.2019, 14:31
  • 1
    #191; Из-за qu и # 233; этот margin:1% 1%? Он делает, что div вместо того, чтобы занимать 100 % высоты ее p и # 225; gina займите 102 % – Alvaro Montoro♦ 11.05.2016, 05:39
  • 2
    Действительно я поместил этот margin:1% 1%;, чтобы дифференцировать divs, но смоги быть, которым css не нормализован, podr и # 237; чтобы помещать html, body{ height: 100%; background-color: #000; margin: 0; }, чтобы это нормализовать. – Juan Pinzón 11.05.2016, 06:40
  • 3
    Он был одиноким любопытство – Alvaro Montoro♦ 11.05.2016, 16:33

Ответ Хуана Пинсон хороший, я буду помещать тебе альтернативу используя Flexbox.

Идея состоит в том, чтобы иметь контейнер flex который заняли 100 % высоты страницы, и у которого было свойство flex-direction со стоимостью column (таким образом элементы будут расширяться в вертикальном адресе вместо горизонтального, как он происходит со стандартной настройкой row). Тогда Ваши потомки будут иметь flex:1 что будет способствовать тому, чтобы они были распространены однообразно внутри контейнера.

Здесь у тебя есть пример:

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

.contenedor {
  display:flex;
  flex-direction: column;
  min-height:100%;
}

.contenedor > div {
  flex:1;
  display:flex;
}

.fila0 { background:rgba(0,0,0,0.3); }
.fila1 { background:rgba(255,0,0,0.3); }
<div class="contenedor">
  <div class="fila0">A</div>
  <div class="fila1">B</div>
</div>
3
ответ дан 24.11.2019, 14:31

Если он для всей страницы, ты можешь использовать единицы vh, ты не должен определять высоту для этикеток html и body, всегда он касающийся размера браузера. Взамен, если эти два div они находятся в контейнере и ты хочешь, чтобы они заняли половину этого контейнера, ты будешь должен использовать процентное содержание или flexbox, как тебя показывают Альваро и Хуан.

Это мой пример:

* {
  margin: 0;
  box-sizing: border-box;
}


div {
  background-color: #ccc;
  border: solid 1px red;
  height: 50vh;
}
<div></div>
<div></div>
2
ответ дан 24.11.2019, 14:31