Подтвердить что ты не робот

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

Это мой код:

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

<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 height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

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

*/

Ответ 2

Попробуйте следующее:

position: fixed;  
bottom: 0;

Ответ 3

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

.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 */
  }

Ответ 4

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

#body {
  overflow-y: 0 auto;
}
#footer {
  color: #fff;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  padding: 10px;
  top: 100vh; 
  margin-top: -100px;
  width: 100%; height: 100px;
}
<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>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>

Ответ 5

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

Вы хотите использовать метод ryan fait.

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

.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}

<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>

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

<footer>
</footer>

Ответ 6

#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}

Ответ 7

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

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}

Ответ 8

.footer-small, .push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

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

Ответ 9

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

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

Это то, что сработало для меня:

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;
}

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

Ответ 10

Почему не с 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>