2

Посмотрел много вопросов SO на эту тему, но моей ситуации не нашел. Имеется страница, с контентом, который не влазит на одну страницу. Пока контента мало, все ОК. При большом объеме контент наползает на footer, а он остается на своем старом месте:

Контента мало

контента много

.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    min-height: 20px;
    background-color: #505050;
}

Каким способом нужно делать подвалы для "длинных" страниц?

MobiDevices
  • 7,309
Slava Podolskiy
  • 505
  • 3
  • 16

5 Answers5

4

Можно еще так, с проверкой (если мало контента, то фиксировать, иначе статика).

много контента:

if( $(document).height() <= $(window).height() ){  
  $(".page-footer").addClass("fixed-bottom");
}
.page-footer {
  padding: 1rem;
  background: #333;
  color: #fff;
  text-align: center;
}

.page-footer.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum accusamus cum voluptas voluptate esse asperiores cupiditate velit quaerat optio, praesentium ipsa, deserunt veniam facilis libero accusantium! Similique accusamus assumenda beatae amet harum delectus quisquam minima quidem id veniam a eaque iste labore distinctio quia cupiditate, ullam suscipit. Repellendus, porro, officiis!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque officia, hic iure placeat, dolores amet eaque quae, eveniet laboriosam voluptatibus fugit velit aut. Facilis expedita, id quasi asperiores molestiae, numquam provident consectetur maxime ad dolorem illo, voluptas dolore accusantium quam deleniti enim ratione doloremque cum omnis ea maiores, deserunt earum eveniet minima eaque. Soluta earum amet esse rem vitae eaque enim aut obcaecati laudantium provident eius delectus nulla doloremque omnis quisquam, ut eos modi, autem tenetur! Deserunt pariatur cum aspernatur aperiam, obcaecati libero, tenetur veritatis aut praesentium architecto optio perspiciatis quo ut. Atque, soluta doloribus recusandae quibusdam ipsam qui!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, unde.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus perspiciatis molestiae nemo soluta nesciunt alias porro impedit, perferendis molestias possimus mollitia asperiores laboriosam consectetur enim odit, animi facere earum consequatur in veniam neque quae esse. Beatae iure laboriosam optio? Pariatur.
  </p>
</main>

  <footer class="page-footer">
    FOOTER
  </footer>

мало контента:

if( $(document).height() <= $(window).height() ){  
  $(".page-footer").addClass("fixed-bottom");
}
.page-footer {
  padding: 1rem;
  background: #333;
  color: #fff;
  text-align: center;
}

.page-footer.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
  
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
  </p>
</main>

  <footer class="page-footer">
    FOOTER
  </footer>
SVE
  • 22,387
2

Ещё есть вариант с использованием flexbox.

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;

background: red;
}


.Site-content {
  flex: 1;
}


/* Просто для демо */
header {
  background: blue;
}


footer {
  background: pink;
}


    

  • {
color: #fff;
margin: 0;
padding: 0;
    • 



}
<body class="Site">
  <header>Header</header>
  <main class="Site-content">Content</main>
  <footer>Footer</footer>
</body>
YozhEzhi
  • 759
1

1. Решение через абсолютное позиционирование для фиксированной высоты футера

html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}


main {
   /* Выставляем отступ с высотой footer */
  padding-bottom: 30px;
}


footer {
  /* Позиционируем footer внизу main /
  position: absolute;
  bottom: 0;
  width: 100%;
  / Высота footer */
  height: 30px;
}
<body>
  <header>
   header
  </header>
  <main>
   content
  </main>
  <footer>
   footer
  </footer>
</body>

2. Решение через Flexbox для адаптивной высоты футера

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

main {
  /* Чтобы занимал оставшееся пространство */
  flex-grow: 1;
}


footer {
  /* Чтобы footer не уменьшался */
  flex-shrink: 0;
}
<header>
  header
</header>
<main>
  content
</main>
<footer>
  footer
</footer>

3. Решение через таблицы для адаптивной высоты футера

body {
  display: table;
  min-height: 100vh;
}

main {
  display: table-row;
  /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */
  height: 100%;
}
<header>
  header
</header>
<main>
  content
</main>
<footer>
  footer
</footer>

4. Решение с использованием jQuery для адаптивной высоты футера

// Высчитываем высоту footer и делаем соответствующий отступ от main:
function footer(){
$('main').css('padding-bottom',$('footer').height());
}
window.addEventListener('load',footer);
window.addEventListener('resize',footer);
html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}


main {
   /* Выставляем отступ с высотой footer по умолчанию */
  padding-bottom: 30px;
}


footer {
  /* Позиционируем footer внизу main /
  position: absolute;
  bottom: 0;
  width: 100%;
  / Высота footer по умолчанию */
  height: 30px;
}
<html>
<head>
 <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
</head>
<body>
  <header>
   header
  </header>
  <main>
   main
  </main>
  <footer>
   footer
  </footer>
</body>
</html>
MobiDevices
  • 7,309
-1

Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:

html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

body {
position: relative;
/* Растягиваем body по высоте html */
min-height: 100%;
}


aside {
float: left;
background: skyblue;
height: 100%;
width: 300px;
overflow: auto;
}


main {
overflow: hidden;
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
}


article {
overflow: auto;
height: 100%;
background: green;
}


footer {
background: #ddd;
/* Позиционируем footer внизу main /
position: absolute;
bottom: 0;
width: 100%;
/ Высота footer */
height: 20px;
}
<body>
  <main>
    <aside>
        sidebar
    </aside>
    <article>
        Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:
    </article>
  </main>
  <footer>
   footer
  </footer>
</body>
MobiDevices
  • 7,309
-2

Есть такой сайт как CSS Sticky Footer.

Если использовать их CSS и HTML, то футер будет всегда внизу, так же это решение работает на большом количестве браузеров начиная с IE8.

Вот фрагмент кода, если не много адаптировать под вашу верстку всё будет работать хорошо.

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

    

  • {margin:0;padding:0;}
    • 



/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */


html, body {height: 100%;}


#wrap {min-height: 100%;}


#main {overflow:auto;
 padding-bottom: 180px;}  /* must be same height as the footer */


#footer {position: relative;
 margin-top: -180px; /* negative value of footer height */
 height: 180px;
 clear:both;}


/Opera Fix/
body:before {/* thanks to Maleika (Kohoutec)/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/ thank you Erik J - negate effect of float*/
}


/* IMPORTANT


You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.


<!--[if !IE 7]>
 <style type="text/css">
  #wrap {display:table;height:100%}
 </style>
<![endif]-->


*/
<div id="wrap">

 <div id="main">

 </div>

</div>

<div id="footer">

</div>
TheMY3
  • 9,071