Попутный ветер CSS - нижний колонтитул с фиксированным положением - PullRequest
2 голосов
/ 09 марта 2020

Я новичок в Tailwind CSS и пытаюсь сделать простую страницу портфолио с доступными примерами кода в документации Tailwind.

Пока класс контейнера оборачивает весь контент на странице с некоторым запасом, если я установлю нижний колонтитул в фиксированное положение, нижний колонтитул переполнится вправо. Кажется, проблема связана с фиксированным или абсолютным классом, так как без этого класса нижний колонтитул принимает ширину контейнера.

Что можно сделать, чтобы обернуть нижний колонтитул внутри контейнера с примененным фиксированным классом? Подход CSS подойдет, но в идеале я ищу причину, по которой Tailwind CSS не будет переносить нижний колонтитул по ширине родителя.

Код и демонстрация: https://codesandbox.io/s/tailwind-portfolio-s1r1g

Пытаясь добиться этого: Requirement

1 Ответ

1 голос
/ 09 марта 2020

Я обновил HTML для вашего кода и все работает отлично. Вот обновленный код: Ссылка песочницы

Обновления сделаны - 1. Удален класс container mx-auto из тела и добавлен как отдельный контейнерный элемент div. 2. Этот новый div будет содержать вашу навигацию и другое содержимое, кроме нижнего колонтитула.

Что происходило ранее - по умолчанию нижний колонтитул выравнивался по левому краю от своего родителя, который был body, а тело выравнивалось по по центру он отображался так, как будто нижний колонтитул выровнен по правому краю.

Если вы хотите сделать это из существующего кода, вы можете добавить одну строку в css -

footer { left: 0}
...