Как заставить свой нижний колонтитул придерживаться нижней части любой страницы в CSS? - PullRequest
Новая
       9

Как заставить свой нижний колонтитул придерживаться нижней части любой страницы в CSS?

25 голосов
/ 01 апреля 2011

Это мой код: 

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

Понятия не имею, что с этим не так - кто-нибудь может помочь?

РЕДАКТИРОВАТЬ: для большей ясности в том, что не так: нижний колонтитул отображается внизу, как и ожидалось, при загрузке страницы. Однако, когда высота веб-страницы>, чем размеры на экране, так что появляется полоса прокрутки, нижний колонтитул остается в том же месте. То есть, когда высота страницы <= 100%, нижний колонтитул находится внизу. Однако, когда высота страницы составляет> 100%, нижний колонтитул находится не внизу этой страницы, а в нижней части видимого экрана.

РЕДАКТИРОВАТЬ: Удивительно, но ни одно из решений ниже не сработало. Вместо этого я реализовал боковую панель.

Ответы [ 10 ]

28 голосов
/ 01 апреля 2011

Вы, наверное, ищете этот пример : 

<div class="wrapper">
    Your content here
    <div class="push"></div>
</div>
<div class="footer">
    Your footer here
</div>

CSS:

Для 142-пиксельного нижнего колонтитула 

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
8 голосов
/ 05 апреля 2013

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

position: fixed;  
bottom: 0;
2 голосов
/ 11 мая 2017

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

#body {
  overflow-y: 0 auto;
}
#footer {
  position: fixed;
  top: 100vh; left: 0;
  margin-top: -100px;
  width: 100%; height: 100px;
  padding: 10px;
  color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>
1 голос
/ 01 апреля 2011

Обёртка - это остальная часть вашей страницы.Отрицательные / положительные значения полей / высоты - вот где происходит магия.

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .push 
  {
    height: 142px; /* .push must be the same height as .footer */
  }
0 голосов
/ 18 февраля 2017

Я изо всех сил пытался найти решение, так как ни один из предложенных не достиг того, что я хотел:

  • Если контента меньше, оставайтесь внизу страницы, а не посередине.
  • Если контента достаточно, не держитесь и перекрывайте контент, просто оставайтесь внизу.
  • Скройте его с первого взгляда, поэтому, только если пользователь прокручивает нижний колонтитул, он видит.

Вот что у меня сработало:

HTML: 

<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>

CSS: 

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

Здесь в действии.

0 голосов
/ 16 декабря 2015 
.footer-small, .push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

это тоже работает для меня ....

0 голосов
/ 16 сентября 2015

Это то, что я сделал, и это заставило мой нижний колонтитул остаться внизу. 

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
0 голосов
/ 26 февраля 2014

Почему не с помощью jquery?

Поместите div обертки между верхним и нижним колонтитулом и присвойте свойство min-height для обертки с jquery, равным разнице между высотой документа и (высотой заголовка + высотой нижнего колонтитула). 

<script type="text/javascript">
$(document).ready(function(){
 var dh = $(document).height(); //document height here
 var hh = $('header').height(); //header height
 var fh = $('footer').height(); //footer height
 var wh = Number(dh - hh - fh); //this is the height for the wrapper
 $('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>
0 голосов
/ 01 апреля 2011 
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
0 голосов
/ 01 апреля 2011

Не используйте положение: абсолютное;для любого нижнего колонтитула, так как страница будет меняться по высоте.Если он абсолютный, то нижний колонтитул не будет перемещаться с высотой страницы.

Вы хотите использовать метод Райана Фейта.

Хотя я бы лично сделал это так;

Таким образом, вам не нужно возиться с отрицательными полями и отступами.Также это может быть частью html5, изменяющего #footer на 

<footer>
</footer>
...