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

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

Когда я говорю «липкий нижний колонтитул», я использую его в том, что, как я понимаю, является общим определением «нижнего колонтитула, который никогда не выше нижней части окна просмотра, но если содержимого достаточно, оно будет скрыто пока пользователь не прокрутится достаточно далеко, чтобы увидеть его ».

Обратите внимание, что мне также не нужно поддерживать устаревшие браузеры. Если CSS display: table & связанные свойства помогают здесь, они честная игра.

источник

2012-05-31 Alan H.

Все другие решения здесь устарели и либо использовать JavaScript, или table хаки.

С появлением CSS flex model решение проблемы с липким нижним колонтитулом переменной высоты становится очень простым: в то время как в основном известно для размещения контента в горизонтальном направлении, Flexbox фактически работает так же, как и для задач вертикальной компоновки. Все, что вам нужно сделать, это обернуть вертикальные секции в гибком контейнере и выбрать, какие из них вы хотите расширить. Они автоматически займут все свободное место в контейнере.

Обратите внимание, насколько проста разметка и CSS. Никаких настольных хаков или чего-либо еще.

Модель flex - supported by all major browsers, а также, предположительно, IE11 +, хотя мой IE не отображает этот фрагмент правильно.

html, body { 
 
    height: 100%; 
 
    margin: 0; padding: 0; /* to avoid scrollbars */ 
 
} 
 

 
#wrapper { 
 
    display: flex; /* use the flex model */ 
 
    min-height: 100%; 
 
    flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ 
 
} 
 

 
#header { 
 
    background: yellow; 
 
    height: 100px; /* can be variable as well */ 
 
} 
 

 
#body { 
 
    flex: 1; 
 
    border: 1px solid orange; 
 
} 
 

 
#footer{ 
 
    background: lime; 
 
}

<div id="wrapper"> 
 
    <div id="header">Title</div> 
 
    <div id="body">Body</div> 
 
    <div id="footer"> 
 
    Footer<br/> 
 
    of<br/> 
 
    variable<br/> 
 
    height<br/> 
 
    </div> 
 
</div>

источник

2014-10-25 00:18:44

Спасибо, что возродили этот вопрос с более новой (если не совместимой) техникой, в комплекте с исполняемым кодом. A + –

Действительно. Возможно, самая лучшая часть - это то, что он красиво деградирует. –

Это не работает в сафари 8. – Mathias

Вы можете вставить колонтитул в нижней части окна просмотра только с:

position: fixed; 
bottom: 0;

Однако что будет делать вид, даже если есть содержание.

Чтобы предотвратить это, вы будете нуждаться в некоторых JavaScript:

(window.onscroll = function() { 
    var foot = document.getElementById('footer'); 
    foot.style.position = "static"; 
    if(foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight) 
     foot.style.position = "fixed"; 
})();

((...)(); обертка делает OnScroll функцию дозвонились один раз при загрузке страницы, так что нужно тоже)
(выше функция тестировалась , но он должен работать - если это не так, дайте мне знать, и я буду делать реальную тестовую страницу)

источник

2012-05-31 00:10:32

(...)(); это просто самоисполнение fn, не так ли? –

Да - это в основном заставляет функцию вызываться один раз без необходимости прокрутки, а затем снова каждый раз при запуске события onscroll. –

Это неправильное изображение? "(Оболочка (...)(): функция onscroll вызывается один раз, когда страница загружается, так как это тоже необходимо)« –

переменная высота колонтитула вызывает небольшие проблемы, но должно работать:

<html> 
<head> 
<style type="text/css"> 
html { height: 100%; } 
body { min-height: 100%; } 
.container { min-height: 100%; position: relative; } 
.content { padding-bottom: 200px; } 
.footer { position: absolute; bottom: 0px; background: #ebebeb; text-align: centre; } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="content"> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
    <div class="footer"> 
     <p>This is my footer.</p> 
     <p>This is another line of my footer.</p> 
    </div> 
</div> 
</body> 
</html>

Прокладка на нижней части .content означает, что нижний колонтитул никогда не будет перекрывать содержимое. Однако, учитывая вашу сноска будет переменным размером я бы использовать JavaScript для динамической установки отступов в нижней части содержания один раз при загрузке страницы или каждый раз, когда вы меняете высоту футера:

<script type="text/javascript"> 
$(function() { 
    $(".content").css("padding-bottom", parseInt($(".footer").height() + 20) + 'px'); 
}); 
</script>

Я знаю вас сказал чистый CSS, но я не думаю, что есть способ, учитывая переменную высоту и скрывающие липкие условия. Я думаю, что это самый маленький метод javascript.

источник

2012-05-31 00:49:45 Anthony

Вы можете абсолютно сделать это в чистом CSS. Clicky the linky.

В этой концепции используются display: table-cell, а не обычные нормальные display: block.

HTML

<body class="Frame"> 
    <header class="Row"><h1>Catchy header</h1></header> 
    <section class="Row Expand"><h2>Awesome content</h2></section> 
    <footer class="Row"><h3>Sticky footer</h3></footer> 
</body>

CSS

.Frame { 
    display: table; 
    table-layout: fixed; 
    height: 100%; 
    width: 100%; 
} 
.Row { 
    display: table-row; 
    height: 1px; 
} 
.Row.Expand { 
    height: auto; 
}

источник

2012-09-04 01:21:19 cereallarceny

Хотя код примера отсутствует, да, это возможно с помощью этой техники. –

Вы правы! Я сделал свои исправления, чтобы исправить это, рад, что это сработало для вас! – cereallarceny

В этом примере нет «table-cell». Вы имели в виду 'table-row'? Во всяком случае, современный способ сделать это - использовать [CSS flexbox model] (https://stackoverflow.com/a/26558049/1269037). –

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

ответ

Смежные вопросы