Как сделать так, чтобы div перекрывал весь экран

У меня есть вопрос.

У меня пока получилось: введите описание изображения здесь

Я в основном хочу, чтобы выделенный div перекрывал экран вашего устройства, независимо от того, насколько велик экран устройства. теперь я вижу 2 разных div, когда открываю это на своем телефоне. я хочу видеть только тот, который выделен. Как мне этого добиться?

Заранее спасибо, Кевин


html css responsive
person Kevin    schedule 18.05.2016    source источник
comment
Установите body в height:100%;width:100%, затем .textboxtransparent {height:100%;width:100%}   -  person Albzi    schedule 18.05.2016
comment
Пожалуйста, поделитесь кодом и создайте скрипку, показывающую проблему   -  person Mr_Green    schedule 18.05.2016
comment
Возможный дубликат Как сделать ‹div› всегда полноэкранным?   -  person Farside    schedule 18.05.2016
comment
Вы можете присвоить высоту области просмотра div, например height: 100vh   -  person Pugazh    schedule 18.05.2016
comment
jsfiddle.net/dfv4gdw3 Добавлен скрипт Js   -  person Kevin    schedule 18.05.2016
comment
@Albzi Это не сработало D:   -  person Kevin    schedule 18.05.2016

Ответы (3)


arrow_upward
22
arrow_downward

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

.main {
    height: 100vh;
    background-color: green;
}
<div class="main">
  CONTENT
</div>

Использование height: 100vh означает, что рассматриваемый элемент всегда будет на 100% высотой области просмотра, которую имеет пользователь / разработчик.

Дополнительная информация: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

person David Wilkinson    schedule 18.05.2016
comment
@KevinAartsen рад помочь! - person David Wilkinson; 18.05.2016

arrow_upward
5
arrow_downward

Вероятно, вы можете сделать это, установив положение div, которое вы хотите сделать полноэкранным, на absolute, а затем примените приведенный ниже CSS.

top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;

Таким образом, окончательный css будет выглядеть следующим образом

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
}
person saugandh k    schedule 18.05.2016

arrow_upward
3
arrow_downward

Вы можете использовать position: absolute; или position: fixed.
Используйте absolute, чтобы просто закрыть всю страницу.
Используйте fixed, чтобы закрепить его в позиции по умолчанию. Если вы используете fixed, даже если ваша страница превышает 100%, вы не можете прокрутить вниз, чтобы увидеть что-либо еще.

CSS

div.any {
   position: absolute; /*position: fixed;*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*You can add anything else to this like image, background-color, etc.*/
}

HTML

<div class="any"></div>
person Advaith    schedule 18.05.2016