#html #css #sticky #sticky-footer
Вопрос:
Я пытаюсь сделать липкий нижний колонтитул внутри элемента с горизонтальной прокруткой. Я хочу, чтобы этот липкий нижний колонтитул был выровнен снизу, имел автоматическую высоту в зависимости от его содержимого и был шириной, равной ширине прокрутки (в данном примере 200 пикселей), поэтому, когда я прокручиваю вправо, нижний колонтитул находится на том же месте, а его содержимое по горизонтали центрировано (содержимое должно быть каким-то элементом, а не только простым текстом). Я был бы признателен за помощь.
Желаемое решение: 
Мой текущий код:
* { box-sizing: border-box; } body { margin: 0; padding: 0; } .example { width: 200px; overflow-x: auto; } .container { position: relative; display: flex; width: 400px; height: 100px; background-color: moccasin; } .footer { position: sticky; bottom: 0; background-color: palegreen; justify-self: center; } lt;div class="example"gt; lt;div class="container"gt; lt;div class="footer"gt; Footer lt;/divgt; lt;/divgt; lt;/divgt; Большое спасибо.
Комментарии:
1. Кстати, это начинается где-то в середине страницы? Если это просто не получится
fixedилиabsolute2. да, липкий необходим, потому что этот элемент». пример » будет размещен где-то на веб-странице, как компонент, поэтому фиксированное или абсолютное положение не решает мою проблему.
Ответ №1:
Надеюсь, это решит вашу проблему: (Добавлен Lorem Ipsum, чтобы показать, что эффект прокрутки и нижний колонтитул исправлены)
* { box-sizing: border-box; outline: 1px solid red; } body { margin: 0; padding: 0; } .example { width: 200px; height: 300px; overflow-x: auto; } .container { position: relative; display: flex; flex-direction: column; width: 400px; height: 100%; background-color: moccasin; } .footer { position: sticky; width: 200px; height: 20px; top: 100%; background-color: palegreen; text-align: center; left: 0; } lt;div class="example"gt; lt;div class="container"gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum lt;div class="footer"gt; Footer lt;/divgt; lt;/divgt; lt;/divgt; Ответ №2:
Пожалуйста, ознакомьтесь со следующими изменениями. Я изменил некоторые из ваших CSS в вашем .footer классе, чтобы придать ему ширину 100%, а position: relative затем добавил align-self: flex-end; и некоторые стили полосы прокрутки, используя ::-webkit-scrollbar не стесняйтесь изменять их по желанию.
* { box-sizing: border-box; } body { margin: 0; padding: 0; } .example { width: 200px; overflow-x: auto; } .container { position: relative; display: flex; align-self: flex-end; width: 400px; height: 100px; background-color: moccasin; } .footer { position: relative; height: 20px; background-color: palegreen; align-self: flex-end; width: 100%; text-align: center; } ::-webkit-scrollbar { width: 4px; height: 8px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(255, 255, 255, .5); } p { margin: 0; padding: 0; position: fixed; margin-left: 5rem; } lt;div class="example"gt; lt;div class="container"gt; lt;div class="footer"gt;lt;pgt;Footerlt;/pgt;lt;/divgt; lt;/divgt; lt;/divgt; ПРАВКА: Вы использовали justify-self: center; . С помощью a position: relative; вы можете использовать align-self: flex-end; нижний колонтитул для отображения внизу. Также добавлено position: fixed; некоторое поле, чтобы ваш текст оставался при прокрутке.
Комментарии:
1. спасибо, но это не решает мою проблему. элемент «div.пример» будет размещен где-то на веб-странице, как компонент, поэтому фиксированное или абсолютное положение не решает мою проблему. Кроме того, ваше решение сделает текст «Нижнего колонтитула» невидимым при прокрутке вправо. Вот почему я хочу использовать липкий текст нижнего колонтитула, который должен быть центрирован и постоянно виден, даже если контейнер прокручивается вправо.
2. ответ от @qUB3r-001 правильный и решает именно то, что я хотел. Ваше решение с позицией: исправлено не будет работать для меня, потому что вы прикрепляете нижний колонтитул к области просмотра, он не будет работать в более сложном макете страницы. Кроме того, вы не центрируете содержимое нижнего колонтитула. Жестко закодированное поле слева не будет работать в репрессивной среде, также не известно о динамическом содержании нижнего колонтитула. Однако я ценю вашу помощь.