Нижний колонтитул не до конца внизу, когда я в полноэкранном режиме (F11)

Question

Я сделал нижний колонтитул для своего веб-сайта, и он отлично работает, пока я не нажму f11 / не перейду в полноэкранный режим, где нижний колонтитул внезапно помещается не полностью внизу, но между моим нижним колонтитулом и нижней частью моей страницы есть пространство, где есть только белый / цвет моего фона. Показано на фотографиях по ссылкам ниже:

Нормальный: https://i.stack.imgur.com/Cxi35.png В полноэкранном режиме: https://i.stack.imgur.com/405JV.png

Html

<div  class="footer">
<footer>
        <a>text</a>
</footer>
    </div>

Css

footer {
    background-color: #000000;
    border-color: #000000;
    position: relative;
    line-height: 10px;
    width: 100%;
    height: 50px;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 50px;
    font-size: 10px;
    }

html css

0

pat 14 Янв 2021 в 02:20

Answer 1

Вы почти получили это. Если вы хотите, чтобы он всегда находился в конце страницы (даже при прокрутке), используйте position: absolute. Чтобы не закрывать содержимое в конце прокрутки, добавьте тег html внизу.

html {
  padding-bottom: 50px;
}


footer {
  background-color: #000000;
  border-color: #000000;
  position: absolute;
  line-height: 10px;
  width: 100%;
  height: 50px;
  bottom: 0px;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 50px;
  font-size: 10px;
}

<div class="footer">
  <footer>
    <a>text</a>
  </footer>
</div>

-1

Jack 13 Янв 2021 в 23:34

Answer 2

Это связано с тем, что в полноэкранном режиме доступное пространство между нижней частью области просмотра и нижним колонтитулом больше. Следовательно, нижний колонтитул не будет прилипать точно к низу с position: absolute и bottom: 0.

Использование CSS Flexbox и margin-top: auto обеспечивает хорошее исправление. Используя display: flex и flex-direction: column, вы можете создать гибкий блок, который сохраняет поведение обычного потока документов с точки зрения сохранения составных блочных элементов.

Параметр min-height: 100vh указывает body растягиваться и заполнять по крайней мере всю высоту области просмотра. Затем использование margin-top: auto в нижнем колонтитуле эффективно «подталкивает» нижний колонтитул к нижней части экрана. Это решение работает для экрана любого размера независимо от очень большой высоты области просмотра.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
}

.footer {
  margin-top: auto;
  background-color: #000000;
  border-color: #000000;
  line-height: 10px;
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 10px;
}

<body>
  <div class="footer">
    <footer>
      <a>text</a>
    </footer>
  </div>
</body>

0

Tanner Dolby 13 Янв 2021 в 23:42

Answer 3

Есть несколько способов решить эту проблему.

Вы можете добавить в нижний колонтитул следующее:

position : absolute;
bottom: 0;
left : 0;
width : 100%

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

Другой способ справиться с этим - дать телу минимальную высоту 100vh и либо сделать его гибким и дать нижнему колонтитулу верхнее поле auto, либо дать нижнему колонтитулу фиксированную высоту и дать ему верхний край auto. Должен работать так же хорошо.

(Быстрый совет, если вы еще не знали: в HTML есть тег нижнего колонтитула, который вы можете использовать вместо тега div. Это не имеет абсолютно никакого значения, но обеспечивает семантическую помощь для тех, кто читает ваш код)

-1

CoderLean 13 Янв 2021 в 23:28

Answer 4

    body{
    background:white;
    color:darksalmon;
   padding:0;
    margin:0;
    height:100%;
     width:100%;
     }
     .foot{
 background:black; 
    color:lightblue;
   bottom:0;
   position:fixed;
     width:100%;
   height:18%;
  }

    <body>
      <div class="foot">
     <footer>
      <a href="#">text</a>
       </footer>
        </div>

Попробуй, это сработало для меня, когда я боролся с той же проблемой

-1

Eseosa Osayi 13 Янв 2021 в 23:41

Нижний колонтитул не до конца внизу, когда я в полноэкранном режиме (F11)

4 ответа

Похожие вопросы

Новые вопросы

html