Отобразить элемент на весь viewport, но не за его пределами

@53ifbb · Регистрация: 01.03.2016

Студворк — интернет-сервис помощи студентам

Возможно на ccs такое не зависимо в каком положении скроллы находятся ?
Элемент должен быть 100% х 100%, но не выходить за пределы видимой области на текущий момент (скроллинг).
Элемент появляющийся (js).

А если нет таких решений, то может дадите логику для написания js...

@Freeze_Breeze · 02.07.2018, 21:05

53ifbb,
Отобразить элемент на весь viewport, а что Вы подразумеваете под словом viewport?

Сообщение от 53ifbb

Возможно на ccs такое не зависимо в каком положении скроллы находятся ?

Чего?
Попробуйте:

CSS
1
2
3
4
.class {
    width: 100vw;
    height: 100vh;
}

@53ifbb · 02.07.2018, 23:19 **[ТС]**

Freeze_Breeze, такое я пробовал, тоже самое, что и пиксели.
Я подразумеваю физическую область, нужно развернуть элемент на ней (сайт может быть прокручен в любом направлении, а может быть еще и увеличен масштаб)...

@Freeze_Breeze · 03.07.2018, 00:06

53ifbb,

Сообщение от 53ifbb

тоже самое, что и пиксели

Не совсем так. vw и vh это относительные единицы измерения, а вычисляются они от ширины и высоты окна браузера и при любой ширине и высоте окна браузера эта поверхность будет всегда занимать по ширине и высоте 100%. (Единственное что Вас может тревожить, так это скролы, но для этого используйте это CSS правило * {margin: 0;})

Сообщение от 53ifbb

Я подразумеваю физическую область, нужно развернуть элемент на ней (сайт может быть прокручен в любом направлении, а может быть еще и увеличен масштаб)

Вы делаете сайт под VR?

Добавлено через 12 минут
53ifbb, Как вариант можете прочитать статью https://html5book.ru/edinicy-i... vmin-vmax/

@53ifbb · 03.07.2018, 01:48 **[ТС]**

Freeze_Breeze, моя основная проблема в начальных координатах. При абсолютной позиции или фиксированной окно открывается от края тега html, а надо от физического)))
Эта единица конечно не полный аналог, но на элементе ведет себя так же когда я делаю зум в мобильной сафари, например.

Добавлено через 2 минуты
Или все же писать скрипт определения скрола ?

@Freeze_Breeze · 03.07.2018, 09:22

53ifbb,

Сообщение от 53ifbb

но на элементе ведет себя так же когда я делаю зум в мобильной сафари, например.

И Вы хотите что бы при увеличении, уменьшении у Вас все элементы оставались на месте. То есть если я на мобильном устройстве захочу увеличить масштаб какого нибудь элемента то все элементы будут оставаться на месте вне зависимо от размеров. Я правильно понял?

@mrtoxas · 03.07.2018, 10:04

53ifbb, приведите код, который даст возможность воспроизвести проблему, а то так можно долго гадать над тем, что вы там делаете и что не получается.

Сообщение от 53ifbb

При абсолютной позиции или фиксированной окно открывается от края тега html, а надо от физического

position:fixed
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он позиционируется относительно исходного содержащего блока, установленного viewport

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html {
      margin-top: 100px;
    }
 
    body {
      border: 1px solid black;
    }
 
    .block {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .5)
    }
  </style>
</head>
 
<body>
    Lorem ipsum dolor sit amet.
  <div class="block">sd</div>
</body>
 
</html>

@53ifbb · 03.07.2018, 22:03 **[ТС]**

Freeze_Breeze, минимальная ширина сайта 1030рх. Есть возможность масштабирования. И в первом посте я написал элемент появляется через on click.
Т.е. сайт резиновый, сделан для десктопов и на них все четко до мелочей. Есть 1 скрытый элемент (слой перекрывающий весь макет), который нужно развернуть только на физической области. Подход с

CSS
1
2
3
position: fixed;
      top: 0;
      left: 0;

на десктопе работает как необходимо, на на iPhone развертывание происходит от края макета (<html>).

Добавлено через 11 минут
mrtoxas, Freeze_Breeze, вот пример проблемы

HTML5
1
https://nasional.tempo.co/read/1103365/kpk-gelar-ott-gubernur-aceh-dan-bupati-bener-meriah-ditangkap?BeritaUtama&campaign=BeritaUtama_Click_1

Открываем на мобильнике с ЮзерАгент - Десктор, приближаем и кликаем на картинку. Видим, что кусок модального окна уходит на экран. Окно не начинается не от одно из краев.
Этот сайт полностью имитирует мою проблему.

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594

	Отобразить элемент на весь viewport, но не за его пределами 02.07.2018, 18:40. Показов 1572. Ответов 7 Метки нет (Все метки) Возможно на ccs такое не зависимо в каком положении скроллы находятся ? Элемент должен быть 100% х 100%, но не выходить за пределы видимой области на текущий момент (скроллинг). Элемент появляющийся (js). А если нет таких решений, то может дадите логику для написания js... 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	02.07.2018, 23:19 [ТС]
	Freeze_Breeze, такое я пробовал, тоже самое, что и пиксели. Я подразумеваю физическую область, нужно развернуть элемент на ней (сайт может быть прокручен в любом направлении, а может быть еще и увеличен масштаб)... 0

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	03.07.2018, 01:48 [ТС]
	Freeze_Breeze, моя основная проблема в начальных координатах. При абсолютной позиции или фиксированной окно открывается от края тега html, а надо от физического))) Эта единица конечно не полный аналог, но на элементе ведет себя так же когда я делаю зум в мобильной сафари, например. Добавлено через 2 минуты Или все же писать скрипт определения скрола ? 0