100% Высота на IOS устройство не работает

рисую вертикальную линию в HTML так:100% Высота на IOS устройство не работает

.vr-long { 
 
    background: #000000; 
 
    border: none; 
 
    width: 1px; 
 
    height: 100%; 
 
}

<hr class="vr-long">

Это отлично работает на любом устройстве (PC, Android) и каждый проверенный браузер, кроме все браузеры на моем ipad (iphone не тестировался). На моем ipad все вертикальные линии исчезли. Проблема заключается в том, что «высота: 100%»; потому что когда я использую height: 50px;, например, я получаю эту вертикальную линию.

Любые идеи, как получить height: 100% для работы на iOS?

Кстати: та же самая проблема, когда я использую IMG-тег, чтобы нарисовать вертикальную линию, используя повтор у и высота: 100% ...

источник

2016-10-07 Ccenter

Я не могу видеть вашу строку в примере, потому что вам нужно установить для тела и html также высоту 100%. Попробуйте установить 'height: 100vh' вместо 100%. Если это работает - вам нужно проверить всех родителей вашего 'vr-long' и установить их высоту: 100% –

height: 100vh работает, но я уже установил родителей на высоту: 100%. Как я уже сказал, вертикальные линии появляются на каждом устройстве, кроме iOS ... – Ccenter

Этот код не реплицирует проблему ..... так что невозможно проверить – DaniP

Я решил проблему с помощью DIV как вертикальная lign.

.vr-long { 
 
    margin: 0 2em 0 2em; 
 
    border: 1px solid #000000; 
 
}

<div class="vr-long"></div>

Я до сих пор dont't знаю, почему эта проблема только появилась на моем Ipad, но workaorund не вызывает никаких проблем.

источник

2016-10-07 20:44:42 Ccenter

100% Высота на IOS устройство не работает

ответ

Смежные вопросы