CSS - липкий нижний колонтитул

Кажется, с этим есть масса решенных проблем, но ни одна из них не работает для меня ...

Я создал этот маленький jsfiddle, чтобы показать вам: нижний колонтитул jsfiddle

И CSS:

.footer {
     width:798px;
     border-top: 2px solid #2E181A;
     clear: both;
     padding: 5px 0 0 0;
     background-color: inherit;
     text-align: center;
     bottom:0;
     background-color: #E6D9BD;
     position:relative;
     height: 30px;
     margin: -30px auto 2px auto;
     z-index:30;
 }

 .container {
     width: 788px;
     margin: 0px auto 0px auto;
     padding: 0px 0px 30px 0px;
     border:5px solid #2E181A;
     background-color: #E6D9BD;
     min-height: 100%;
     position:relative;
     content: " "; /* 1 */
     display: table; /* 2 */
 }

 .contentleft {
     background-color: inherit;
     margin:5px 10px 10px 10px;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 300px;
     display:block;
 }

 .contentright {
     background-color: inherit;
     margin:5px 0px 10px 10px;
     border:0px solid #2E181A;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 420px;
     display:block;
 }

Я установил верхнюю границу в div.footer, и она должна быть видна и небольшое пространство между границей и div.container.

Надеюсь, вы быстро взглянете на код и поймете, что я делаю неправильно!


html css footer sticky
person Simon Jensen    schedule 16.02.2014    source источник
comment
Разве липкий нижний колонтитул по определению не будет прилипать к странице во время прокрутки пользователя? Если предположить, что это правда, то почему у вас position из .footer относительный, а не фиксированный?   -  person djthoms    schedule 16.02.2014
comment
Эээ ... Я мог бы понять определение «липкое» неправильно. Я имею в виду нижний колонтитул, который остается внизу независимо от длины содержимого. Мой нижний колонтитул делает это, но не так, как я хочу ...   -  person Simon Jensen    schedule 16.02.2014
comment
Просто подпишитесь на cssstickyfooter.com   -  person Etheryte    schedule 16.02.2014
comment
@Nit, спасибо за ссылку, но это был тот выпуск, за которым я следил давно, но как-то испортил мой css, и теперь я полностью потерял общую картину этого ...   -  person Simon Jensen    schedule 16.02.2014
comment
@SimonJensen Как вы хотите, чтобы это выглядело?   -  person Zach Saucier    schedule 16.02.2014

Ответы (6)


arrow_upward
4
arrow_downward

Современный чистый CSS «липкий нижний колонтитул» от Джеймса Дина

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Демо здесь

person Fizer Khan    schedule 17.06.2014

arrow_upward
3
arrow_downward

Я не уверен, что вы этого хотели? http://jsfiddle.net/2jn3J/19/

Я добавил контейнер для div нижнего колонтитула высотой 50 пикселей, который прикреплен к низу. Div нижнего колонтитула теперь абсолютно расположен внизу с div высотой 30 пикселей, оставляя зазор в 20 пикселей.

.footer-container {
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;
}

.footer {
    border-top: 2px solid #2E181A;
    background-color: inherit;
    text-align: center;
    background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;
}

.container
{
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    background-color: #E6D9BD;
    height:2000px;
    position:relative;
        content: " "; /* 1 */
    display: table; /* 2 */
}
.contentleft
{

    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 300px;
        display:block;
}
.contentright
{

    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}
person Jordan    schedule 16.02.2014
comment
Я думал, что липкий нижний колонтитул - это нижний колонтитул, который всегда находится под остальным контентом? Не фиксированный нижний колонтитул, он всегда находится внизу области просмотра. Я ошибся? - person Marcel; 16.02.2014
comment
Липкий нижний колонтитул - это когда нижний колонтитул прилипает к нижней части экрана. - person Jordan; 16.02.2014
comment
В строке 13 ВАШЕЙ скрипки измените его на это поле: 30px auto 2px auto; Затем вверху появляется поле 30 пикселей. - person Jordan; 16.02.2014
comment
stackoverflow.com/ questions / 2269369 / - липкий нижний колонтитул должен оставаться прикрепленным к низу, за исключением случаев, когда контент длиннее, чем высота области просмотра. Гадать определения разнятся - person Marcel; 16.02.2014
comment
Ах да, извините за путаницу, приятель - person Jordan; 16.02.2014
comment
@ user3266433! Ты сделал это! Виной тому был этот маленький минус! Теперь вроде заработало :) Спасибо большое !! - person Simon Jensen; 16.02.2014
comment
Наиболее распространенное использование липкого нижнего колонтитула - это нижний колонтитул, который прилипает к нижней части страницы, когда контент неглубокий, и действует как обычный нижний колонтитул в противном случае. - person Etheryte; 16.02.2014

arrow_upward
3
arrow_downward

С Flexbox жизнь намного проще.

.FlexContainer {
  display: flex;
  flex-direction: column;
}

.Main-Content {
  flex: 1; 
  // This ensures, all extra space is stretched by this class. Remaining will stretch to own height
}

/* Only to distinguish. No need to give body height  */

header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}

body {
height: 300px;
}
<body class="FlexContainer">
  <header>HEADER</header>
  <main class="Main-Content">
    This is main section
  </main>
  <footer>FOOOOTERRR</footer>
</body>

person Mahesh    schedule 11.11.2017

arrow_upward
1
arrow_downward

Фактически вы близки к пониманию концепции из http://www.cssstickyfooter.com/html-code.html, ему просто нужно html, body { height: 100%; }, чтобы он стал «липким».

http://jsfiddle.net/2jn3J/22/

Если вы хотите сделать все правильно и получить пространство между содержимым и нижним колонтитулом, вам придется добавить еще div с min-height: 100%; и удалить min-height: 100%; из .container.

http://jsfiddle.net/2jn3J/28/

CSS:

html, body { height: 100%; }
.wrap { min-height: 100%; }
.footer {
    width:798px;
    border-top: 2px solid #2E181A;
    clear: both;
    padding: 5px 0 0 0;
    background-color: inherit;
    text-align: center;
    bottom:0;
    background-color: #E6D9BD;
    position:relative;
    height: 30px;
    margin: -37px auto 0 auto;
    z-index:30;
}

.container {
    width: 788px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    border:5px solid #2E181A;
    background-color: #E6D9BD;
    position:relative;
    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;
}

.contentleft {
    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: auto;
    width: 300px;
    display:block;
}
.contentright {
    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}

HTML:

<div class="wrap">
<div class="container">

<div class="contentleft">Content in the left</div>
<div class="contentright">Content in the right</div>

</div>
</div>

<div class="footer">Sticky footer</div>
person Marcel    schedule 16.02.2014
comment
Спасибо за ответ @Marcel, но этого не произошло. Я считаю, что не имеет значения, находится ли min-height: 100% в оболочке или в контейнере, НО, изменяя это поле: -30px auto 2px auto; до этого поля: 30px авто 2px авто; сделай это! :) Большое спасибо за ответ, но этот минус был ошибкой. - person Simon Jensen; 16.02.2014

arrow_upward
0
arrow_downward

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

CSS:

#frame{
   display: table;
   height: 100%
   width: 100%;
}

#header{
   display: table-row;
   height: 100px;
   background-color: red;
}

#container{
   display: table-row;
}

#footer{
   display: table-row;
   height: 100px;
   background-color: black;
}

HTML:

<div id="frame">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

JSFiddle (я добавил несколько дополнительных стилей в тело, потому что скрипт находится в iframe, но при обычном поведении браузера вам это не понадобится).

person Mihail Tarlyovski    schedule 03.06.2015

arrow_upward
0
arrow_downward

Я только что написал об этом статью. Вы можете найти его на носителе.

Существует множество подходящих решений для CSS, но я рекомендую использовать Javascript для достижения этого результата.

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

Вот код, который это делает (при условии, что нижний колонтитул находится в порядке с идентификатором #footer):

window.addEventListener("load", activateStickyFooter);

function activateStickyFooter() {
  adjustFooterCssTopToSticky(); 
  window.addEventListener("resize", adjustFooterCssTopToSticky);
}

function adjustFooterCssTopToSticky() {
  const footer = document.querySelector("#footer");
  const bounding_box = footer.getBoundingClientRect();
  const footer_height = bounding_box.height;
  const window_height = window.innerHeight;
  const above_footer_height = bounding_box.top - getCssTopAttribute(footer);
  if (above_footer_height + footer_height <= window_height) {
    const new_footer_top = window_height - (above_footer_height + footer_height);
    footer.style.top = new_footer_top + "px";
  } else if (above_footer_height + footer_height > window_height) {
    footer.style.top = null;
  }
}

function getCssTopAttribute(htmlElement) {
  const top_string = htmlElement.style.top;
  if (top_string === null || top_string.length === 0) {
    return 0;
  }
  const extracted_top_pixels = top_string.substring(0, top_string.length - 2);
  return parseFloat(extracted_top_pixels);
}

Если вы хотите получить более подробный ответ, перейдите к средняя статья. Я также написал для этого JS Fiddle.

person Robert Vunabandi    schedule 13.11.2018