Sticky Footer для ответственного сайта

Я пытаюсь создать липкий нижний колонтитул для отзывчивого сайта. Я искал в Интернете и нашел различные решения, но моя проблема заключается в том, что из-за количества текста в нижнем колонтитуле высота изменений нижнего колонтитула происходит из-за слов. Я пробовал использовать этот метод на сайте Райана Файта (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/), но поскольку вы не можете определить высоту нижнего колонтитула, являющегося статическим значением, трудно установить значение push для CSS. В настоящее время у меня только нижний колонтитул зафиксирован на дне, но это вызывает проблему, потому что, когда нижний колонтитул увеличивается по высоте, он занимает ценное пространство на небольших видовых экранах. Вот пример того, сколько информации находится в нижнем колонтитуле ниже. Какие-либо предложения?Sticky Footer для ответственного сайта

<footer> 
<div id="upperFooter"> 
<p>2000 - 2012 College Name | Copyright | Internet Privacy Policy | Disclaimer |  Collection and Use of Social Security Numbers</p> 
</div> 
<!-- end upperFooter --> 
<div id="lowerFooter"> 
<p>College Name is a member of the Stated State College System. College Name is not affiliated with any other public or private university or College in State or elsewhere. </p> 
<p>College Name is a division of College Name and is accredited by the Commission on Colleges of the Association of Colleges (“XIXI”) to award the baccalaureate and associate degree. Contact the Commission on Colleges at for questions about the accreditation of College Name.</p> 
</div> 
<!-- end lowerFooter --> 
</footer>

источник

2012-07-31 Jason Tremain

Может выкапывать любой ненужный контент с помощью медиа запросов. При отображении содержимого на мобильных устройствах вы должны показывать только наиболее релевантный контент. Другим вариантом будет стек навигации для мобильных устройств. Измените макет, используя медиа-запросы. –

Идея Криса - хорошая, поскольку речь идет о том, чтобы нижний колонтитул занимал меньше места. Когда текст уже довольно маленький, и если вы хотите, чтобы он был полезен (что, очевидно, вы это делаете, если вам нелегко сделать его отзывчивым), то извлечение некоторых элементов похоже на путь. Другая идея заключалась бы в том, чтобы скрыть нижний колонтитул (установите «bottom: -150px;» или что-то еще) и позвольте пользователю нажать один раз, чтобы просмотреть информацию об авторских правах. – acsmith

См. [Этот пример] (http://stackoverflow.com/a/20114486/618649). Используйте запросы @media, чтобы исправить высоту нижнего колонтитула для каждого интересующего вас разрешения экрана и т. Д. – Craig

Try давая колонтитул абсолютного позиционирования

footer { 
position: absolute; 
bottom: 0; 
}

источник

2012-08-03 12:30:05 Raj

Я думаю, что сначала попробовал это. Способ построения страницы - это заголовок div, контейнер div и нижний колонтитул.Когда я создаю нижний колонтитул для позиции «абсолютный», он заставляет нижний колонтитул прокручиваться со страницей, что, конечно, я не хочу. –

Если в контейнере div есть блоки, расположенные слева/справа, как боковая панель, тогда может быть реализовано переполнение: auto; к контейнеру решат любую проблему позиционирования с нижним колонтитулом. Но очень сложно понять, что вызывает проблему, не глядя на весь html и css, если возможно, укажите коды. – Raj

-3

насчет footer { position: fixed; bottom: 0; }

источник

2012-09-22 06:14:06 CharlieLukeUK

OP утверждает, что в данный момент используется нижний колонтитул, закрепленный на нижней части. –

Вы можете проверить этот блог: http://timothy-long.com/responsive-sticky-footer/

Он использует display: table хака сделать это, но демонстрационная страница работает нормально.

Ваш другой вариант использует медиа-запросы для адаптации высоты нижнего колонтитула при его изменении.

источник

2013-04-03 00:51:22 jlovison

Но, как я вижу, этот липкий нижний колонтитул не подходит низу в последней версии Chrome ... Кроме того, если вы начинаете играть с помощью css, он делает странное поведение, например, заголовок или контент сбрасываются. – Arkana

Лучшее решение для переменной высоты нижнего колонтитула - это медиа-запросы, основанные на ширине в точках останова, где изменяется высота. Вам просто нужно, чтобы это был статический контент, чтобы написать их правильно. Вышеуказанные предложения были самыми близкими, которые подходят тем, что ищет ОП. – jlovison

Вы можете попробовать: Modern Clean CSS “Sticky Footer”. Может быть, это поможет.

Используйте нижний колонтитул с: position:absolute; и придайте ему высоту, затем дайте margin-bottom: (footer height); вашей обертке.

источник

2014-12-16 12:34:36

Не могли бы вы обобщить основные выводы этой ссылки, чтобы ответ был там в том случае, если сообщение должно исчезнуть? Благодарю. – rapvelopment

В прошлом у меня был хороший успех с Ryan Fait's code, но, как вы упомянули, он не работает хорошо для нижних колонтитулов с переменной высотой.

Лучшее решение, которое я нашел, когда нижние колонтитулы не является фиксированной высота это Flexbox solution

Flexbox является удивительным и вперед мышление, поэтому лично я не возражаю, если вы не будете иметь полную поддержку некоторые старые браузеры.

Working example на основе приведенного ниже кода. Я использовал некоторые префиксы так более широкую поддержку браузера, но код не так чистого

HTML

<body class="Site"> 
    <header>...</header> 
    <main class="Site-content">...</main> 
    <footer>...</footer> 
</body>

CSS

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

.Site-content { 
    flex: 1; 
}

источник

2014-12-16 13:40:52

Sticky Footer для ответственного сайта

ответ

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