Фиксированная нижняя панель с минимальной высотой

Я пытаюсь понять трюк в https://www.google.com/.Фиксированная нижняя панель с минимальной высотой

Нижняя панель имеет position: absolute; bottom: 0;, но если вы минимизируете высоту окна, она остается («стеки») под логотипом/входом.

Конечно, это что-то можно сделать с помощью js, но с чистым CSS? Мой вопрос: есть ли какой-либо трюк CSS, который может создать этот «эффект стека», если да, то как это можно сделать?

Я попытался понять, делает ли это <span>Google Logo</span> <div>Bottom bar</div>, но я думаю, нет.

источник

2013-11-27 Diolor

Чистый способ сделать это, чтобы установить нижнюю границу на корпусе, которая равна высоте нижнего колонтитула.

Вот ваш 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%; 
}

И HTML:

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

Вот пример такого подхода: http://mystrd.at/data/sticky_footer.html

источник

2013-11-27 04:53:20 sarahholden

Это потому, что они устанавливают значение padding-bottom, равное высоте нижнего колонтитула, чтобы его вытеснить.

.content { 
    padding-bottom: 35px; 
}

См .. padding-bottom:35px = height:35px

#footer { 
    bottom: 0; 
    font-size: 10pt; 
    height: 35px; 
    position: absolute; 
    width: 100%; 
}

источник

2013-11-27 04:35:38

Да. Мой вопрос: хотя он имеет абсолютное/нижнее 0, он невидим, когда вы изменяете размер окна (допустим) 300px height как если бы. Но для более чем 485px он начинает «двигаться» вниз. Это потому, что #viewport имеет 'position: relative;'? – Diolor

Интересный подход. Благодарю. – Diolor

Фиксированная нижняя панель с минимальной высотой

ответ

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