Нижний колонтитул внизу, но не липкий

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

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

Сообщите мне, если вы хотите, чтобы я опубликовал свой html/css.

источник

2014-11-06 Tom Hammond

Всегда размещайте свой HTML/CSS, иначе мы не сможем вам помочь. – tokyovariable

И на самом деле, если вы выполните простой поиск «липкого нижнего колонтитула» на этом сайте, вы получите множество знаний. Липкий нижний колонтитул обычно не означает _sticky_ в том смысле, что он следует за вами вверх и вниз по странице. Обычно, когда вы видите «липкий» и «нижний колонтитул» вместе, это означает «сместился вниз в нижней части страницы без пробела под ним» – JakeParis

В Интернете есть ряд хороших примеров.

Настоящая обновленная версия: http://mystrd.at/modern-clean-css-sticky-footer/; У меня нет опыта с этим.

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

http://www.cssstickyfooter.com/html-code.html

Вот мой собственный слегка отредактированный вариант второй ссылке, которую я имел счастье с.

/* Sticky Footer Stuff 
*/ 
html,body { height: 100%; } 
#sticky-wrap { min-height: 100%; } 
.footer { 
    height: 160px; 
    margin-top: -160px; 
} 
/* end sticky footer stuff 
*/ 


<div class="wrapper" id="sticky-wrap"> 
    <div class="content-area”> 
    </div> 
</div> 
<footer> 
</footer>

источник

2014-11-06 02:33:51 JakeParis

Это замечательно. Именно то, что я искал! –

У меня была аналогичная проблема. Я всегда хотел, чтобы мой нижний колонтитул находился внизу страницы, но никогда не перекрывал другие div.

Лучшее решение, которое я придумал было:

CSS

#footer { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 
@media screen and (max-height: 700px) { 
    #footer { 
    position: relative; 
    } 
}

HTML

<div id="footer"></div>

Это будет держать футер всегда на дне мин-высота 701px, и ниже что он будет внизу относительно других div. Конечно, вы можете изменить параметры и настроить их на собственные измерения пикселей.

Надеюсь, это поможет.

источник

2017-08-22 07:53:33 Haim

Нижний колонтитул внизу, но не липкий

ответ

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