Почему не работает скролл?

Question

[wufapexef]

Хочу попробовать перенести скролл с боди на внутренний элемент. Почему не работает? https://codepen.io/dubx/pen/GdwrXw

Поясняю - размеры height не известны заранее.

Comments

[Хороший UI]

Посняю - когда размеры контента будут больше чем высота твоего блока которая "ЕСТЕСВЕННО не известны заранее", то тогда "ЕСТЕСВЕННО " и появиться скролл.

не охото это говорить, но код у тебя правильный

[wufapexef]

Верстальщик Ваш, ты походу прикалываешся или я не пойму как воспринимать эту ересь. Гле там скролл появился? КОнтент выходит за пределы экрана. Скролла нет.

[Хороший UI]

лол, как я тебе и сказал ты просто уменьшил высотку блока и\или увеличил контент.

Убери calc и поста overflow без Y, все равно скролл будет
гений блин

[wufapexef]

Верстальщик Ваш, точно, явные траблы с реальностью. Сначала чел утверждает что он мне якобы "как и говорил" (лолшто?). Потом говорит что скролл будет если убрать калк и overflow без Y. Это уже явные галлюцинации, потому что если я выполню эти бредовые рекомендации лично у меня никакого скролла нету. Но он есть в воображении вундеркиндов. Какой сложный мир, и как много в нем надо терпения!

[CODALSD]

Интересно посмотреть на рабочий вариант, который был найден без Гениев,)

[Хороший UI]

wufapexef, эхх... просто почитай на досуге про css

Ты убрал высоту у блока, а в css это значит что будет height: auto
это значит - блок АВТОМАТИЧЕСКИ увеличивается от твоего контента, как может быть скролл?
скролл появляется при ПЕРЕПОЛНЕНИИ блока, но у блока АВТОМАТИЧЕСКАЯ высота, то есть он будет УВЕЛИЧИВАТЬСЯ.
в общем если ты не понял, я сдаюсь

[wufapexef]

Верстальщик Ваш, как ты предлагаешь тогда выставить высоту, я не пойму?

[Хороший UI]

как хочешь так и ставь, если она тебе не известна не ставь вообще, будет авто, но тогда и не будет скролла.
Скролл появляется лишь тогда, когда блоку задана явная высота И контент начинает переполнять эту высоту.

[wufapexef]

Верстальщик Ваш, еще раз: ты сказал убрать calc и vh - как тогда по твоему сделать блок во весь экран??? Мне самому это решение не по душе, ибо на мобилах как известно vh это садомазо

[Хороший UI]

wufapexef, я отходил.

Про калк и vh я тебе сказал убрать ради примера, что бы убедиться что скролл есть.

Короче ты может задать 1 экран, да это 100vh, а на мобилках с помощью медиазапроса поставить уже фиксированную высоту

если я правильно понял что ты хочешь

[wufapexef]

Верстальщик Ваш, судя по всему не правльно понял, потмоу что это вообще не понятно при чем тут

а на мобилках с помощью медиазапроса поставить уже фиксированную высоту

При чем тут медиазапросы? Откуда брать фиксированную высоту? Вообще в курсе поведения 100vh в мобильных браузерах или мы на разных языках сейчас?

[Хороший UI]

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

[wufapexef]

Верстальщик Ваш, понял, ты понятия не имеешь что такое 100vh на мобилке, вопрос закрыт))

[Дархан]

Так какое решение то?

[wufapexef]

Дархан Камалиев, какое? Вопроса темы? По ссылке в вопросе.

Answer 1

[CODALSD]

.content
  width 100%
  height 100vh
  background-color grey
  overflow-y scroll

Вроде то, но там должен быть контент, который занимает больше пространства чем блок

P.S. Второй вариант решения без привязки к VH

<header></header>
<div class="wrapper">
<div class="content">
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
  <h1>на тебе контент</h1>
</div>
  </div>

body {
  overflow:hidden;
  height:100%
}
.wrapper {
  height:100%;
  position: absolute;
  width:100%;
}
header {
   width :100%;
  height :5em;
  background-color :red ;
}
.content{
  background-color: white;
  padding: 10px;
  max-height:100%;
  position:relative;
  overflow-y:auto;
}

Comments

[wufapexef]

О, еще один знаток. На тебе контент https://codepen.io/dubx/pen/GdwrXw

[CODALSD]

В чем проблема то? Блок скроллится как надо, какие претензии? Для того, что бы блок начал скроллится необходимо что бы высотка блока была обозначена конкретно и контент должен занимать пространство больше чем сам блок.
Да очень жаль что нет минусов.

[wufapexef]

CODALSD, т.е. привязыватся к размеру экрана в vh? Других вариантов сделать во весь экран я не нахожу, кроме как еще и дж высчитывать попикселям высоту, которую должен занять блок.

[Хороший UI]

CODALSD, я не знаю как до него это донести, что если он ставить авто-высоту то скролла априори не будет
а если он не указывает явную высота то блок и будет автовысоты

[wufapexef]

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

[CODALSD]

Ну тут проблема в том, что внутренний блок тянется на всю высоту контента, но при этом у body задан overflow:hidden который обрезает контент.

[wufapexef]

CODALSD, понятно это уже. Как выставить высоту блока не используя calc?

[CODALSD]

Ну не все же за вас делать. Мог вообще просто ссылку дать чтобы сами разобрались что к чему)
а тут вам 2 варианта выкатил, время свое не пожалел)

Аревуар)

[wufapexef]

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

[CODALSD]

пфф... ну и ходите по своему праведному)

header {
   width :100%;
  height :5%;
  background-color :red ;
}
.content{
  background-color: white;
  max-height:95%;
  position:relative;
  overflow-y:auto;

}

а это вам вдогонку что бы не скафнили больше,)

Answer 2

[Хороший UI]

Потому что у тебя контента нет, нечему скролиться .

Comments

[wufapexef]

Гениально

[wufapexef]

На тебе контент, вундеркинд https://codepen.io/dubx/pen/GdwrXw

Еще предположения?))

[Хороший UI]

wufapexef, а теперь возьми и свой же контент раза в 2 увеличь и появиться скролл.
у тебя высота блока 5 экранов стоит, а контент на пару экранов максимум. Или измени высоту блок на 100px и сразу скролл увидишь

[wufapexef]

Верстальщик Ваш, лол и что ты предлагаешь? Попиксельно высчитывать размеры height? Это неизвестная величина. Еще предположения?

[Хороший UI]

wufapexef, а что ты хочешь то я не пойму? ты поставил высоту блока в 5 экранов, наполнил контент 2умя (примерно )экранами, чему там скролиться то? помести внутри него блок высотой 6экранов, 600vh и будет тебе скролл.

[wufapexef]

Верстальщик Ваш, точно гений. 500vh для примера, неужели не ясно. Высота неизвестна ВООБЩЕ. Поменял на AUTO специально для одаренных. Это ппц же какой-то.

Answer 3

[Алексей Ярков]

Беда... Сказали 100500 раз - чтоб был скролл надо указать высоту.
Вот: https://codepen.io/anon/pen/ZomyrQ
height: 100% и все работает

Comments

[wufapexef]

А норм будет на практике так абсолют позишенами макет делать? Не развалиться в реальном мире на 100500 разных устройствах? Ну просто тогда надо отказыватся от привычной сетки выходит.

[wufapexef]

Вообще хорошее решение. И не надо vh использовать, который меня смущал.

[Алексей Ярков]

wufapexef, 100% не скажу, но вроде не было страшного пока.

[wufapexef]

Алексей Ярков, говорят что вот эти чудеса морфинга-анимации делают как раз абсолютами. Так что от них не уйти если есть желание делать сайты, которые выглядят как нативное приложение. Надо бы изучить этот вопрос, норм ли на абсолютах весь сайт держать?