Блок не растягивается на всю высоту на iPhone

@targon_kp · Регистрация: 03.09.2021

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

Есть контейнер внутри обертку и он растягивается на всю высоту, но почему-то блок (absolute) не растягивается на всю высоту контейнера, а только на видимую часть экрана. Такое поведение только на айфонах (в сафари получается), на Андроиде всё ок.

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
<div class="container">
   <div class="background">
 
  </div>
</div>
 
body{
  width: 100%;
  height: 100vh;
}
 
.container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
 
.background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: .....
}

Может кто-нибудь сталкивался с таким?

@rr33rr · 14.08.2024, 07:27

Сообщение от targon_kp

почему-то блок (absolute) не растягивается на всю высоту контейнера, а только на видимую часть экрана

1) У вас _все_ блоки с абсолютным позиционированием.
2) Есть подозрение, что оно (абсолютное позиционирование) здесь вообще не нужно. Совсем. И ваша задача решается иначе. Но это не точно.
3) Но если очень хочется, то попробуйте заменить правило height: 100%; для .background на min-height: 100%;

@targon_kp · 14.08.2024, 13:26 **[ТС]**

Сообщение от rr33rr

У вас _все_ блоки с абсолютным позиционированием

да, потому что есть ещё самая первая обертка с relative - именно в этой обертке задается высота и ширина и пропорции экрана.

Добавлено через 1 час 44 минуты
И вообще есть ли примеры того, как на Айфоне во всю высоту блок расположился, не обрезаясь внизу при overflow:hidden - без прокрутки?

@Mailo · 14.08.2024, 13:41

На сколько я помню, как раз таки единицы высоты vh будут вам вертикальный скролл добавлять, т.к. они не учитывают доп панелей в телефоне, а dvh учитывают. Ну конечно это же айфон, прогресс не стоит и с каждым днём всё может измениться. Какие то там ширины помню багают отображение по ширине на айфоне.

CSS
1
width: 100%vw;

или

CSS
1
width: 100%dvw;

Но у вас с этим вроде как всё ок, 100% стоит.

Поэкспериментировать с другими единицами измерений посоветовал бы.

@targon_kp · 14.08.2024, 14:08 **[ТС]**

Сообщение от Mailo

Но у вас с этим вроде как всё ок, 100% стоит.

у dvh пока поддержка низкая - 87% что ли (согласно caniuse).
К примеру, на Андроиде высота видимой части легко определяется:

JavaScript
1
2
3
4
5
6
7
8
function initNewHeight(){
    function setHeight() {
        let vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
    setHeight();
    window.addEventListener('resize', setHeight);
}

На сафари айфоне не работает такой подход. Нижняя часть чуток растягивается и обрезается, а то что накладывается сверху absolue - только на видимую часть расширяется.

@Mailo · 14.08.2024, 14:25

Сообщение от targon_kp

На сафари айфоне не работает такой подход

Да вроде как на айфонах с сафари на борту всё ок работает с dvh, ну по крайней мере на эмуляторе.
Площадка

код за минусом ресетов:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .d1,.d2,.d3{
    width: 100%;
    height: 100dvh;
    background: blue;
  }
  .d2{
    background: green;
  }
  .d3{
    background: red;
  }
</style>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>

эмулятор

@targon_kp · 14.08.2024, 18:14 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@targon_kp 7 / 7 / 1 Регистрация: 03.09.2021 Сообщений: 271
	14.08.2024, 18:14 [ТС]
	Да, но dvh плохо поддерживается и в реальном сафари может не сработать, нижняя часть обрезается, а наложение абсолютом почему то на видимую часть растягивается, а не на весь имеющийся блок вместе с обрезанной частью. 0