#html #css #scroll
Вопрос:
Я пытаюсь реализовать вертикальную прокрутку в элементе статьи с помощью html5, но она работает не так, как я хочу. Вместо сохранения фиксированного измерения, если я добавлю
элементы, которые увеличивают высоту статьи. Я публикую здесь код и результат.
/*Especificidad 003*/ body section article { display: grid; grid-template-columns: auto auto auto auto auto; grid-column-start: 1; grid-column-end: 6; overflow-y: scroll; padding: 5%; margin: 5%; background-color: white; border: 0.5em; } /*Especificidad 004*/ body section article p { display: grid; grid-template-columns: auto auto auto auto auto; grid-column-start: 1; grid-column-end: 6; } lt;sectiongt; lt;h1gt;Calculadora RPNlt;/h1gt; lt;articlegt; lt;h2gt;Contenido de la pilalt;/h2gt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;pgt;Pruebalt;/pgt; lt;/articlegt; lt;/sectiongt; В результате получается вот что: высота должна быть намного меньше, и свиток должен работать, но это не так: 
Например, если я добавлю только 3 элемента, это произойдет: 
Ответ №1:
Чтобы это сработало, вашей статье нужна фиксированная высота.
body section article{ display: grid; grid-template-columns:auto auto auto auto auto; grid-column-start: 1; grid-column-end: 6; overflow-y: scroll; padding:5%; margin:5%; /* for example */ height: 200px; background-color: white; border: 0.5em; } Комментарии:
1. Большое спасибо!!! Что за глупость!!! 😀
2. С удовольствием, и вы можете заменить
overflow-y: scroll;,overflow-y: auto;если хотите, чтобы полоса прокрутки отображалась только там, где скрыто содержимое, а не все время.3. однако семантически вы ошибаетесь. Для того, чтобы он работал, контейнер должен быть меньше расчетной высоты содержимого. Контейнер не обязательно должен иметь фиксированную высоту.