Блог

Главная - Вопросы по программированию - Почему нижний колонтитул плавает в css попутного ветра

Почему нижний колонтитул плавает в css попутного ветра

#html #css #reactjs #next.js #tailwind-css

Вопрос:

Я использую нижний колонтитул CSS tailwind в своем проекте NextJS. Я показываю полученные данные. Нижний колонтитул плавает только тогда, когда данных меньше. Я создал файл нижнего колонтитула на своих страницах и импортировал его в свой _app.js файл. Я попробовал абсолютное и фиксированное положение. Но это не работает. Как мне сохранить нижний колонтитул внизу?

 <div className="relative mt-16 bg-gray-900">
  <div className="px-4 pt-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
    <div className="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
      <p className="text-base text-white-100">
        © Copyright 2020. All rights reserved.
      </p>
      <ul className="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
        <li>
          <Link href="/Privacy">
          <a className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
                    Privacy Policy
                  </a>
          </Link>
        </li>
        <li>
          <a href="https://twitter.com/" target="_blank" rel="noreferrer noopener" className="text-sm tracking-wide font-medium text-white-100 transition-colors duration-300 hover:text-indigo-400">
                  Contact
                </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Ответ №1:

Вы можете установить минимальную высоту на основе 100vh минус высоты нижнего колонтитула для основного контейнера содержимого.

 <main class="min-h-[calc(100vh-210px)]">Main Content</main>
<footer class="h-[210px] bg-gray-900">
    <!-- Your footer content -->
</footer>

Попробуйте это на игровой площадке TailwindCSS.

Метки: