Блог

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

Нажмите нижний колонтитул в нижней части короткой страницы

#html #css #footer

Вопрос:

Я хочу переместить нижний колонтитул в нижнюю часть страницы, и поскольку на странице не так много содержимого, нижний колонтитул всплывает и не перемещается вниз.

Я попытался расположить нижний колонтитул как фиксированный элемент в качестве обходного пути, и это работает, но не в этом состоянии:

введите описание изображения здесь

В этом измерении нижний колонтитул ведет себя так, как вы видите, и это вполне ожидаемо, следовательно, показывает лазейку в моем обходном пути.

Это адрес веб-сайта: https://n-ii-ma.github.io/Portfolio-Website/contact.html

Вот коды для этой части:

 /* Contact Footer */

.contact-footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
} 
 <body>
  <header>
    <h1 class="main-title">Nima's Portfolio</h1>
    <nav class="navigation">
      <ul>
        <li>
          <a href="./index.html">Home</a>
        </li>
        <li>
          <a href="./index.html#projects">Projects</a>
        </li>
        <li>
          <a href="./contact.html">Contact Me</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="contact-section">
      <h2>Contact Me</h2>
      <p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
      <div class="links">
        <a href="https://github.com/n-ii-ma" target="_blank">
          <i class="fab fa-github fa-3x"></i>
        </a>
        <a href="#">
          <i class="fas fa-envelope-square fa-3x"></i>
        </a>
      </div>
    </section>
  </main>
  <footer class="contact-footer">amp;copy; All Rights Reserved</footer>
</body>

Есть ли способ, чтобы мой нижний колонтитул всегда оставался внизу страницы?

Комментарии:

1. Вопрос неясен, поэтому нижний колонтитул уже закреплен внизу, не могли бы вы подробнее объяснить, что вы пытаетесь здесь реализовать?

2. @TariqSaeed Я обновил вопрос. Надеюсь, теперь все ясно.

3. Я видел ссылку на пример, которую вы оставили, но она действительно находится внизу страницы. Вы хотите, чтобы он оставался внизу белого раздела, а не внизу всей страницы?

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

5. @tacoshy Да, это именно то, чего я хотел, и ваше решение полностью решило мою проблему. Спасибо миллиард раз!

Ответ №1:

Простое решение, которое полностью поддерживается, — это использование Flexbox.

  1. Мы придаем корпусу min-height: 100vh форму а, чтобы он занимал, по крайней мере, всю высоту видовых экранов.
  2. Поле основного текста по умолчанию приведет к переполнению страницы по умолчанию. Чтобы противостоять этому, нам нужно сбросить маржу с: margin: 0
  3. Мы снова добавляем отступ. Поле по умолчанию в большинстве браузеров составляет 8 пикселей. ПОЭТОМУ я выбрал это. Ты можешь брать все, что тебе заблагорассудится.
  4. Заполнение также приведет к переполнению из-за модели коробки. Чтобы противостоять этому, мы используем: box-sizing: border-box
  5. Затем мы используем flexbox: display: flex .
  6. Для поддержания нормального поведения на уровне блоков мы используем: flex-direction: column
  7. Чтобы нажать нижний колонтитул внизу, мы используем: margin-top: auto; . Это переместит нижний колонтитул в нижнюю часть страницы, если содержимое страницы меньше высоты окна просмотра.
 body {
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
} 
 <body>
  <header>
    <h1 class="main-title">Nima's Portfolio</h1>
    <nav class="navigation">
      <ul>
        <li>
          <a href="./index.html">Home</a>
        </li>
        <li>
          <a href="./index.html#projects">Projects</a>
        </li>
        <li>
          <a href="./contact.html">Contact Me</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="contact-section">
      <h2>Contact Me</h2>
      <p>Use the links below to contact me and I'll reach out to you as soon as possible</p>
      <div class="links">
        <a href="https://github.com/n-ii-ma" target="_blank">
          <i class="fab fa-github fa-3x"></i>
        </a>
        <a href="#">
          <i class="fas fa-envelope-square fa-3x"></i>
        </a>
      </div>
    </section>
  </main>
  <footer class="contact-footer">amp;copy; All Rights Reserved</footer>
</body>
Метки: