Нижний колонтитул не в нижней части в высоком разрешении - PullRequest
Новая
       4

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

0 голосов
/ 26 февраля 2020

У меня есть нижний колонтитул с приведенным ниже кодом HTML и CSS, когда я просматриваю страницу в своем разрешении (1366x768), все выглядит хорошо. Но при использовании устройства с более высоким разрешением (1920x1080) нижний колонтитул не фиксируется снизу, а вместо этого находится над нижним краем (рядом с серединой страницы). Я использовал Chrome Zoom, и кажется, что нижний колонтитул перемещается вместе со всеми элементами на странице. 

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
	background-color: #fff;
	padding: calc(8px * 1.5) 0;
}
</div> <!--/.container-->
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

Есть ли способ сделать так, чтобы нижний колонтитул отображался внизу (во всех разрешениях) и не перемещался вместе с другими элементами? Он чувствует себя свободно.

Ответы [ 3 ]

1 голос
/ 26 февраля 2020

Используя flexbox, мы можем легко удерживать нижний колонтитул в нижней части, оборачивая наш контент, нижний колонтитул и, необязательно, верхний колонтитул в гибкий контейнер с flex-direction: column; и min-height: 100vh при установке содержимого на flex-grow: 1. По умолчанию для flex-grow установлено значение 0, поэтому нам не нужно ничего делать с нашим нижним колонтитулом (хотя я сделал центрирование с помощью align-self: center).

Я также добавил переключатель, чтобы показать увеличенное содержимое рассматривать как доказательство того, что нижний колонтитул будет течь вместе с содержимым, оставаясь при этом в нижней части, когда содержимое само по себе не заполняет #content. 

#container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  align-self: center;
}

#content {
  flex-grow: 1;
  padding: 1rem;
  border-bottom: 1px solid grey;
}

.to-bottom {
  margin-top: 110vh;
}
<div id="container">
  <div id="content">
    <label for="toggle-height">Force Scroll: </label><input id="toggle-height" type="checkbox" onclick="document.querySelector('p:nth-of-type(2)').classList.toggle('to-bottom')"/>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, corporis! Sunt ducimus impedit, dolor id ipsa aliquid in necessitatibus labore! Iste laboriosam eos eligendi vel repellendus, blanditiis accusamus vitae ipsam!</p>
  </div>
  <footer>&copy; My Site</footer>
</div>
0 голосов
/ 26 февраля 2020

Попробуйте это: 

html, body {margin:0; padding:0}

.footer {
  font-size: calc(16px - 2px);
  line-height: 1.1;
  color: #999;
  margin-bottom: 5px;
  text-align: center;
  background-color: #ccc;
  padding: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
}
<footer class="footer container">
  <div class="container-inner">
    <p> <a href="http://example.org" target="_blank">Name, Inc.</a> Copyright ©2020 </p>
  </div>
</footer>

Ссылка: https://www.w3schools.com/cssref/pr_pos_bottom.asp

0 голосов
/ 26 февраля 2020

Просто дайте элементу содержимого перед нижним колонтитулом вычисленную минимальную высоту (с учетом фиксированной высоты всех элементов). Если вы разместите полный код html, вам будет проще помочь ...

[edit] Пример кода -> при условии, что у вас есть заголовок высотой 80px (который не содержится внутри div.content ) и нижний колонтитул высотой 100px, вы можете задать для контейнера минимальную высоту, равную высоте области просмотра (vh) минус 180px (80px верхнего колонтитула + 100px нижнего колонтитула): 

.header
{
  height:80px;
}

.footer
{
  height:100px;
}

.container
{
  min-height:calc(100vh - 180px); 
}

для html код страницы, который будет выглядеть следующим образом: 

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

Если вы хотите сохранить верхний и нижний колонтитулы без фиксированной высоты, чем просто использовать flex-box (для этого требуется элемент-обертка, это может быть тоже ): 

.flex-wrapper
{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header
{
  // whatever
}

.footer
{
  // whatever
}

.container
{
  flex:1; 
}

это будет работать с этой html структурой: 

<div class="flex-wrapper">
  <div class="header"></div>
  <div class="container"></div>
  <div class="footer"></div>
</div>
...