Как сделать высоту блока 100% не смотря на панель с url на телефонах, которая исчезает?

Question

[Worddoc]

Здравствуйте. Часто начал замечать, что мобильная панель с url, исчезая при скролле, начинает коверкать отображение элемента, у которого стоит высота 100%. В итоге под этим блоком в 100% внизу появляется пространство с высотой исчезнувшего блока. Есть возможность пофиксить это? Спасибо.

P.S.



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

Comments

[Ankhena]

А высота html и body как при этом задана?

[Worddoc]

Ankhena W: по дефолту

[Ankhena]

Worddoc: у меня стоит по 100%
при исчезновении панельки блок растягивается до всей высоты.

Не совсем плавно он это делает. Но никаких дырок наверху нет.

[Worddoc]

Ankhena W: Вернее под этим блоком в 100% внизу появляется пространство с высотой исчезнувшего блока.

[Worddoc]

Ankhena W: У меня в мобильных браузерах ничего не растягивается до тех пор, пока скролл, вместе с инерционным скроллом не остановится.

[Ankhena]

Worddoc: у меня только первый экран со 100% высотой, перерисовывается как только палец убирается от экрана.
Меня это почему-то никогда не смущало. Задумалась.

Надо посмотреть как это у других. Если это у всех так, то спать спокойно. Если есть по другому, то посмотреть как сделано у них.

[Worddoc]

Ankhena W: У меня на сайте только на одной из 3-х страниц при скролле убирается панель с url. Странно. inter-space.ru

[Ankhena]

Worddoc: надеюсь, на первой? :)

[Worddoc]

Ankhena W: Нее) На второй(обо мне)

[Ankhena]

Worddoc: (андроид, хром)
у меня на вашем сайте вообще панелька с адресом не убирается ))))

[Worddoc]

Ankhena W: прямо сразу после загрузки страницы?))

Answer 1

[Алексей Струков]

Такое часто бывает у фиксированных боковых менюшек. Там просто высота viewport меняется, а стили пересчитываются только после того, как палец отпускаешь с экрана.
Можно поставить высоту 110 процентов например.

Comments

[Worddoc]

Если поставить 110, то некрасиво будут расположена элементы и выровнять их можно будет только с js, что не хочется использовать по каждому поводу( Возможно были у кого-то такие проблемы на тостере или на стаке? Ссылками не обладаю, может поделитесь...?(

[Worddoc]

А именно блоки с соц. сетями должны быть absolute bottom 0, если ставить 110%, часть блоков заберет новая высота

[Алексей Струков]

Worddoc: что это за блок?
Как высота блока влияет на расположение внутренрих элементов?
У них высота относительно высоты родительского блока?

[Алексей Струков]

Worddoc: посмотрел в общем твой сайт. У меня эта проблема только на странице "обо мне" заметна. Там высота блока как раз больше чем высота экрана получается, так как часть контента скрыта внизу

[Worddoc]

Алексей Струков: Да, только не про высоту соц. сетей я радею, а за то, что они могут при bottom: 0 уползти вниз чутка, если высота род. блока будет 110%. Т.е. уползут они на 10% вниз. Тут странно то, что только на этой странице убирается панель с url. На остальных не убирается, поэтому везде все норм. "Там высота блока как раз больше чем высота экрана получается, так как часть контента скрыта внизу" (c) - там высота блока выставлена 100%(панельки боковой), как только убирается панель с url, боковая панель занимает уже 90% на глаз, а растягивается нормально только после того, как отпустить палец и пройдет инерационная прокрутка.

[Алексей Струков]

Worddoc: разобрался в общем. Там кстати еще есть несколько косяков.

[Worddoc]

Алексей Струков: Каких?

[Алексей Струков]

Worddoc: Ну во первых, вместо height: 100% у класса .table поставь min-height: 100vh;
У класса .cell - min-height: 300px; height: 50vh;
У элемента aside - min-height: 600px; height: 100vh;
Короче там долго описывать, но если хошь могу тебе за пивко по телефону/скайпу все рассказать)
Будешь моими руками и пройдемся по всей верстке)

[Worddoc]

Алексей Струков: Да мне бы с этим сайдбаром разобраться сперва

[Алексей Струков]

Worddoc: ну по сайдбару я тебе написал в общем. Суть в том, чтобы он был на всю высоту экрана, но не меньше определенного размера, так как тогда у тебя твои социальные иконки начинают лезть поверх других элементов. Чтобы побороть сдвиг на мобилах, делай ему высоту calc(100vh + 50px) например (тестировать точное значение надо) а у блока социальных кнопок делаешь bottom: 50px; и тогда все нормально будет)

[Worddoc]

Алексей Струков: Попробую, спасибо

[Worddoc]

Алексей Струков: Та же фигня, все работает только после отпускания пальца. Говоришь минимальная высота должна быть фиксированная? А если высота экранов разная у всех?

[Алексей Струков]

Worddoc: она применится только если высота экрана станет меньше заданной и меню тогда уйдет вниз за пределы экрана. Это лучше, чем оно будет сжиматься и иконки начнут друг на друга накладываться.
Зашел на сайт ща - вроде ничего не изменилось. Поставь те свойства, что я написал и сохрани. Я не могу протестировать с мобилы, когда меняю стили в браузере на компе, так что только итеративно можно найти решение)
Я делал эту штуку давно, там не сложно. Надо просто проверить пару вариантов.

Answer 2

[Максим Тимофеев]

Интересно. А height:100vh; как себя ведет?

Comments

[Worddoc]

Так же. Причем очень занимательно то, что у меня на сайте 3 страницы. Есть боковое меню, которое как компонент, вставил во все 3 страницы и поведение их абсолютно одно и то же. Но при скролле, вехняя панель исчезает лишь на 1-ой странице. Причем в разных браузерах.

[Максим Тимофеев]

Worddoc: Дайте ссылку

[Worddoc]

Максим Тимофеев: inter-space.ru

[Максим Тимофеев]

Worddoc: не вижу исчезание чего либо

[Worddoc]

Максим Тимофеев: Страница 2 по счете(обо мне
)

[Максим Тимофеев]

Worddoc: все еще не вижу исчезание чего либо, мало того, не вижу что должно исчезнуть или может это сделать теоретически

[Максим Тимофеев]

Worddoc: скрин в студию

[Worddoc]

Максим Тимофеев: Очень трудно такое заскринить на мобилке, поэтому я сделал скрин самой страницы и описал все. Посмотри в вопросе, после P.S.

[Максим Тимофеев]

Worddoc: Вот тут inter-space.ru/pages/about/stylesheets/screen.css
стили для aside другие