Как сверстать список в HTML?
Мне нужно сверстать два блока - header и список, смысл простой, что бы я мог скроллить элементы внутри, а хедер оставался на своём месте, мне нужно что бы body имел overflow: hidden и я самостоятельно задавал места для скролла, вот текущая реализация:
<body> <header>content</header> <div class="wrapper"> <div class="scroll"> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> </div> </div> </body> |
<body> <header>content</header> <div class="wrapper"> <div class="scroll"> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> <article>item</article> </div> </div> </body>
И CSS стили для этой вёрстки
* { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; overflow: hidden; background: #b6b6b6; padding: 0 200px; } header { width: 100%; height: 80px; background: #fa7979; } .wrapper { width: 100%; height: 100%; padding: 20px 0; } .scroll { width: 100%; height: 100%; overflow-y: auto; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } article { width: 100%; height: 300px; background: #8fe779; } |
* { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; overflow: hidden; background: #b6b6b6; padding: 0 200px; } header { width: 100%; height: 80px; background: #fa7979; } .wrapper { width: 100%; height: 100%; padding: 20px 0; } .scroll { width: 100%; height: 100%; overflow-y: auto; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } article { width: 100%; height: 300px; background: #8fe779; }
Проблема такова, что я хотел у wrapper указать паддинги сверху и снизу, что бы было красиво, но когда мой scroll переполняется данными, то игнорирует нижний пиддинг и уходит куда то в ад, ещё и не докручивается до конца, там всегда элемент меньше, чем все остальные.
Помогите пожалуйста, как сделать так, что бы скролл растягивался на всю доступную ему высоту (исключая и не уменьшая высоту header) и скроллился внутри себя
Дополнительно:
Оффтопик: вообще-то для списков есть теги ul/li или ol/li. А article тут вообще не в кассу по смыслу.
для враппера надо было высоту указать: height: calc(100% - 80px);
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания списка в HTML можно использовать несколько различных элементов, в зависимости от типа списка, который вы хотите создать.
1. Неупорядоченный список (ul):
Для создания неупорядоченного списка используйте тег
, а каждый элемент списка обозначайте тегом- . Неупорядоченный список отображает элементы в виде маркированных точек или других символов, которые указывают на их связь друг с другом, но не на порядок следования. Например:
<ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul>
2. Упорядоченный список (ol):
Для создания упорядоченного списка используйте тег
, а каждый элемент списка также обозначайте тегом- . Упорядоченный список отображает элементы в виде порядковых номеров (цифр, букв и т. д.), указывающих на порядок следования элементов. Например:
<ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol>
3. Список определений (dl):
Список определений состоит из пар терминов (dt) и их определений (dd). Для создания списка определений используйте тег
, а для обозначения термина и его определения - теги- и
- соответственно. Например:
<dl> <dt>Термин 1</dt> <dd>Определение 1</dd> <dt>Термин 2</dt> <dd>Определение 2</dd> </dl>
4. Вложенные списки:
Вы также можете создавать вложенные списки, добавляя один список внутрь другого. Например, упорядоченный список внутри неупорядоченного списка:
<ul> <li>Пункт 1 <ol> <li>Подпункт 1</li> <li>Подпункт 2</li> </ol> </li> <li>Пункт 2</li> </ul><ul> <li>Пункт 1 <ol> <li>Подпункт 1</li> <li>Подпункт 2</li> </ol> </li> <li>Пункт 2</li> </ul>
С помощью этих простых тегов вы можете легко создавать различные типы списков в HTML.