50% высоты делятся на ряды - PullRequest
Новая
       9

50% высоты делятся на ряды

0 голосов
/ 04 января 2019

У меня есть 2 элемента div, которые имеют высоту 50% и размещены в виде строки на странице, разделенной на 2 цвета.

Однако на маленьких экранах пользователю необходимо прокручивать, что нарушает дизайн. Я хочу, чтобы два 50% -ых деления заполняли всю веб-страницу. 

.first-50 {
  height: auto;
  width: 100%;
  background: red;
  position: relative;
  color: #fff;
  min-height: 50%;
}

.second-50 {
  min-height: 50%;
  height: auto;
  width: 100%;
  background: blue;
  position: relative;
  display: none;
}
<div class="height-50 first-50">
  text
</div>
<div class="height-50 second-50">
  text
</div>

Спасибо

Ответы [ 3 ]

0 голосов
/ 04 января 2019

Вот краткий пример, который работает в ограниченном сценарии, для которого я его протестировал.

При относительном позиционировании он будет заполнять столько места, сколько ему нужно. Возможно, вам нужно абсолютное позиционирование / размер, чтобы заставить его заполнить области, которые вам нужны. Однако обратите внимание, что другие элементы на вашей странице (обычно относительные или статически расположенные по умолчанию) вообще не будут знать о них, а просто будут перекрывать их или что-то еще.

Так что, если вы ищете просто фоновую вещь, где она всегда заполняет 50% / 50%, независимо от содержимого сверху, такого подхода абсолютного позиционирования может быть достаточно. Если вам нужно, чтобы эти две области следили за ходом страницы и уважали элементы вокруг них, то этого не произойдет. 

body {
  height: 100%;
  min-height: 100%;
}

.first50 {
    background: red;
    color: #fff;
}

.second50 {
    top: 50%;
    background: blue;
    color: #fff;
}

.height50 {
    height: 50%;
    min-height: 50%;
    width: 100%;
    position: absolute;
}
<div class="height50 first50">
    text
</div>
<div class="height50 second50">
    text
</div>
0 голосов
/ 04 января 2019

Чтобы пояснить ответ предыдущего пользователя, использование vh - это способ получить высоту устройства с почти идеальной поддержкой в ​​современных браузерах. Вы можете разделить два div на 50vh, и он изменится соответственно. CCS-Tricks имеет больше информации по этой теме! 

.first-50 {
  height: 50vh;
  width: 100%;
  background: red;
  position: relative;
  color: #fff;
}

.second-50 {
  height: 50vh;
  width: 100%;
  background: blue;
  position: relative;
}
<div class="height-50 first-50">
  text
</div>
<div class="height-50 second-50">
  test
</div>
0 голосов
/ 04 января 2019

Вы можете использовать vh для регулировки высоты при изменении размера области просмотра

цитата из w3schools.com

vw Относительно 1% ширины области просмотра
vh Относительно 1% высоты окна просмотра 


div {
    height: 50vh;
    width: 100%; /* or width : 100vw */
}

и добавь к нему все, что ты захочешь

...