Как сделать так, чтобы нижний колонтитул оставался внизу веб-страницы?
У меня есть простой макет из двух столбцов с нижним колонтитулом, который очищает правый и левый div в моей разметке. Моя проблема в том, что я не могу заставить нижний колонтитул оставаться внизу страницы во всех браузерах. Это работает, если контент выталкивает нижний колонтитул вниз, но это не всегда так.
может быть вам нужно растянуть html-страницу до полной высоты, как говорится в этой ссылке: makandracards.com/makandra/…
Ответы 28
Чтобы получить липкий нижний колонтитул:
Имейте
<div>сclass = "wrapper"для вашего контента.Справа перед закрывающий
</div>wrapperпоместите<div class = "push"></div>.Справа после закрывающий
</div>wrapperпоместите<div class = "footer"></div>.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
@jlp: вам нужно добавить тег формы к оператору height: 100%, иначе он сломает липкий нижний колонтитул. Примерно так: html, body, form {height: 100%;}
Я заметил, что добавление отступов к нижнему колонтитулу приводит к этому, но выяснил, что это можно исправить, вычтя лишнее заполнение нижнего колонтитула из высоты {footer, push}.
Подробное объяснение демонстрации представлено на этом сайте: CSS липкий нижний колонтитул
Привет, я последовал твоим шагам, и это очень хорошо работает для больших страниц. Но на маленьких страницах, где пользователь не может прокрутить вниз, нижний колонтитул находится немного слишком далеко внизу. Таким образом, почти пустая страница становится прокручиваемой. Кто-нибудь знает, как это исправить? Вы можете увидеть мою тестовую страницу здесь sheltered-escarpment-6887.herokuapp.com
Кстати, вместо добавления div .push вы также можете использовать .wrapper :: after для достижения того же результата.
@Syk Я обнаружил, что уменьшение минимальной высоты помогает. 94% - нормальное значение, но проблема все еще видна на мобильных устройствах :( Не уверен, что здесь есть реальное решение.
Если ваш нижний колонтитул представляет собой просто текст, может быть лучше установить высоту в em, например, для одной строки текста height: 1.5em. Тогда пользователи, которые установили увеличение, все равно смогут видеть текст.
Попробуйте поместить контейнер div (с overflow: auto) вокруг содержимого и боковой панели.
Если это не сработает, есть ли у вас скриншоты или примеры ссылок, где нижний колонтитул отображается неправильно?
Одним из решений было бы установить минимальную высоту для ящиков. К сожалению, похоже, что он не поддерживается IE (сюрприз).
Установите CSS для #footer на:
position: absolute;
bottom: 0;
Затем вам нужно будет добавить padding или margin к нижней части ваших #sidebar и #content, чтобы они соответствовали высоте #footer, или, когда они перекрываются, #footer покроет их.
Кроме того, если я правильно помню, IE6 имеет проблему с bottom: 0 CSS. Возможно, вам придется использовать JS-решение для IE6 (если вам небезразличен IE6).
когда окно слишком маленькое, нижний колонтитул отображается перед содержимым с этим CSS.
Смотрите мой ответ @Seichi
Вы можете использовать position: absolute, чтобы поместить нижний колонтитул внизу страницы, но затем убедитесь, что ваши 2 столбца имеют соответствующий margin-bottom, чтобы они никогда не перекрывались нижним колонтитулом.
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
Я пробовал это с моей аналогичной настройкой (два столбца + нижний колонтитул), и это не сработало.
Он перекрывается с контентом, если контент растет.
вот почему контент имеет нижнее поле. вы должны установить его на ту фиксированную высоту, которую вы делаете нижним колонтитулом.
Как бы то ни было, если что-то имеет нулевое значение, неважно, в какой единице измерения оно находится, ничего есть ничто, поэтому все 0px во всех таблицах стилей, которые я видел, должны быть просто 0.
что, если высота страницы больше высоты дисплея или длина нижнего колонтитула является динамической? Посмотрите мой ответ для решения этой проблемы.
Я пробовал это, но не работает нижний колонтитул с правой стороны.
Смотрите мой ответ @ShrJoshi
он будет перекрывать содержимое, если тело вырастет больше, чем текущий vh
Ни одно из этих чистых решений css не работает должным образом с динамическим изменением размера содержимого (по крайней мере, в firefox и Safari), например, если у вас есть фон, установленный в контейнере div, странице, а затем изменить размер (добавление нескольких строк) таблицы внутри div, table может выступать из нижней части стилизованной области, т. е. вы можете сделать половину таблицы белой на черной теме, а половину таблицы полностью белой, потому что и цвет шрифта, и цвет фона белые. Это в основном не исправимо со страницами meroller.
Вложенный многостолбцовый макет div - это уродливый прием, а блок div со 100% минимальной высотой тела / контейнера для прикрепления нижнего колонтитула - еще более уродливый прием.
Единственное решение без сценария, которое работает во всех браузерах, которые я пробовал: гораздо более простая / короче таблица с thead (для заголовка) / tfoot (для нижнего колонтитула) / tbody (td для любого количества столбцов) и 100% высотой. Но в этом есть очевидные семантические и SEO-недостатки (tfoot должен стоять перед tbody. Однако роли ARIA могут помочь приличным поисковым системам).
Вот решение с jQuery, которое работает как шарм. Он проверяет, больше ли высота окна, чем высота тела. Если это так, то для компенсации изменяется верхнее поле нижнего колонтитула. Протестировано в Firefox, Chrome, Safari и Opera.
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
Если у вашего нижнего колонтитула уже есть верхнее поле (например, 50 пикселей), вам нужно будет изменить последнюю часть для:
css( 'margin-top', height_diff + 50 )
Один из вариантов - добавить div-толкач прямо перед нижним колонтитулом. Затем установите высоту толкателя div. Это позволяет избежать необходимости иметь дело с существующей маржой
См. Мой ответ о решении без js.
Используйте абсолютное позиционирование и z-index, чтобы создать div с липким нижним колонтитулом при любом разрешении, выполнив следующие действия:
- Создайте div нижнего колонтитула с
position: absolute; bottom: 0;и желаемой высотой - Установите отступ нижнего колонтитула, чтобы добавить пробел между нижней частью содержимого и нижней частью окна.
- Создайте контейнер
div, который обертывает содержимое тела с помощьюposition: relative; min-height: 100%;. - Добавьте нижний отступ к основному содержимому
div, который равен высоте плюс отступ нижнего колонтитула. - Установите
z-indexнижнего колонтитула больше, чемdivконтейнера, если нижний колонтитул обрезан
Вот пример:
<!doctype html>
<html>
<head>
<title>Sticky Footer</title>
<meta charset = "utf-8">
<style>
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style>
</head>
<body>
<div class = "wrapper">
<div class = "column">
<span>hello</span>
</div>
<div class = "footer">
<p>This is a test. This is only a test...</p>
</div>
</div>
</body>
</html>Используйте модули CSS vh!
Вероятно, самый очевидный и небезопасный способ избавиться от липкого нижнего колонтитула - это использовать новый единицы просмотра css.
Возьмем, к примеру, следующую простую разметку:
<header>header goes here</header>
<div class = "content">This page has little content</div>
<footer>This is my footer</footer>
Если верхний колонтитул, скажем, 80 пикселей в высоту, а нижний колонтитул - 40 пикселей, то мы можем сделать наш липкий нижний колонтитул с одним правилом в блоке содержимого:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
Это означает: пусть высота div содержимого будет по меньшей мере 100% высоты области просмотра минус объединенная высота верхнего и нижнего колонтитула.
Вот и все.
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class = "content">This page has little content</div>
<footer>This is my footer</footer>... и вот как тот же код работает с большим количеством контента в div контента:
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class = "content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
This is my footer
</footer>NB:
1) Высота верхнего и нижнего колонтитулов должна быть известна
2) Старые версии IE (IE8-) и Android (4.4-) не поддерживают единицы просмотра. (могу ли я использовать)
3) Давным-давно у webkit была проблема с единицами области просмотра в правиле calc. Это действительно было исправлено (глянь сюда), поэтому здесь нет никаких проблем. Однако, если вы по какой-то причине хотите избежать использования calc, вы можете обойти это, используя отрицательные поля и отступы с изменением размера поля -
Вот так:
* {
margin:0;padding:0;
}
header {
background: yellow;
height: 80px;
position:relative;
}
.content {
min-height: 100vh;
background: pink;
margin: -80px 0 -40px;
padding: 80px 0 40px;
box-sizing:border-box;
}
footer {
height: 40px;
background: aqua;
}<header>header goes here</header>
<div class = "content">Lorem ipsum
</div>
<footer>
This is my footer
</footer>Это в значительной степени лучшее решение, которое я здесь видел, оно работало даже в моем странном случае, когда часть содержимого .content переливалась в нижний колонтитул по неизвестной-какой-то причине. И я полагаю, что с такими вещами, как Sass и переменные, он мог бы быть еще более гибким.
Действительно, этот работает как шарм. Легко откатиться и для не поддерживающих браузеров.
Как возиться с абсолютными измерениями все еще не взломано? В лучшем случае это возможно меньше хакерский
Но а если высота нижнего колонтитула и верхнего колонтитула измеряется в процентах, а не в пикселях? Как 15% от высоты страницы?
Единицы области просмотра не всегда работают должным образом в мобильных браузерах, которые скрывают или отображают адресную строку в зависимости от положения прокрутки.
CSS:
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML:
<div id = "container">
<div class = "footer">
</div>
</div>
Это должно сработать, если вы ищете отзывчивый нижний колонтитул, выровненный по нижней части страницы, который всегда сохраняет верхнее поле в 80% от высоты области просмотра.
Несколько человек дали ответ на эту простую проблему здесь, но я хочу добавить одну вещь, учитывая, насколько я был разочарован, пока не понял, что делаю неправильно.
Как уже упоминалось, самый простой способ сделать это так ..
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
Однако свойство, не упомянутое в сообщениях, предположительно потому, что оно обычно используется по умолчанию, - это позиция: статическая в теге тела. Позиция родственника работать не будет!
Моя тема wordpress переопределила отображение тела по умолчанию, и это смущало меня очень долго.
Липкий нижний колонтитул с display: flex
Решение, вдохновленное Липкий нижний колонтитул Филипа Уолтона.
Объяснение
Это решение действительно только для:
- Хром ≥ 21,0
- Firefox ≥ 20.0
- Internet Explorer ≥ 10
- Safari ≥ 6.1
Он основан на flex дисплей, используя свойство flex-grow, которое позволяет элементу расти в высота или ширина (когда flow-direction установлен на column или row соответственно), чтобы занимать дополнительное пространство в контейнере.
Мы собираемся использовать также блок vh, где 1vh - это определяется как:
1/100th of the height of the viewport
Следовательно, высота 100vh - это краткий способ сказать элементу, что он занимает всю высоту области просмотра.
Вот как вы бы структурировали свою веб-страницу:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
Чтобы нижний колонтитул прилипал к нижней части страницы, вам нужно, чтобы пространство между телом и нижним колонтитулом увеличивалось настолько, насколько это требуется, чтобы подтолкнуть нижний колонтитул к нижней части страницы.
Таким образом, наш макет становится:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
Выполнение
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}<body>
<div class = "content">Hello World!</div>
<div class = "spacer"></div>
<footer class = "footer"></footer>
</body>Вы можете поиграть с ним на JSFiddle.
Причуды сафари
Имейте в виду, что Safari имеет некорректная реализация свойства flex-shrink, который позволяет элементам уменьшаться больше, чем минимальная высота, необходимая для отображения содержимого.
Чтобы решить эту проблему, вам необходимо явно установить для свойства flex-shrink значение 0 для .content и footer в приведенном выше примере:
.content {
flex-shrink: 0;
}
.footer {
flex-shrink: 0;
}
Либо измените стиль flex для элемента spacer на:
.spacer {
flex: 1 0 auto;
}
Этот трехзначный сокращенный стиль эквивалентен следующей полной настройке:
.spacer {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Элегантно работает везде.
Я считаю, что это правильный ответ, поскольку на самом деле это единственный подход, который работает, даже когда высота нижнего колонтитула неизвестна.
Это портит сетку с Neat 2
Но почему не само решение Филипа Уолтона, зачем лишний «спейсер»?
@YakovL В решении Уолтона элемент .Site-content играет ту же роль, что и spacer. Просто он по-другому называется.
@Gherman ну, у .Site-content есть аналог .content в этой разметке .. но неважно, я спросил о случае, у gcedo есть какое-то конкретное представление об этом, не нужно гадать
@YakovL Действительно, один тег кажется несколько избыточным.
ПОЛЬЗОВАТЕЛЬСКИЙ ПЛАГИН JQuery CROSS BROWSER - $ .footerBottom ()
Или используйте jQuery, как я, и установите высоту нижнего колонтитула на auto или fix, как хотите, это все равно будет работать. этот плагин использует селекторы jQuery, поэтому для его работы вам нужно будет включить библиотеку jQuery в свой файл.
Вот как вы запускаете плагин. Импортируйте jQuery, скопируйте код этого настраиваемого плагина jQuery и импортируйте его после импорта jQuery! Это очень просто и понятно, но важно.
Когда вы это сделаете, все, что вам нужно сделать, это запустить этот код:
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
нет необходимости помещать его в событие готовности документа. Он и так будет работать хорошо. Он будет пересчитывать положение нижнего колонтитула при загрузке страницы и изменении размера окна.
Вот код плагина, который вам не обязательно понимать. Просто знаю, как это реализовать. Он делает всю работу за вас. Однако, если вы хотите узнать, как это работает, просто просмотрите код. Я оставил вам комментарии.
//import jQuery library before this script
// Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target: "footer",
container: "html",
innercontainer: "body",
css: {
footer: {
position: "absolute",
left: 0,
bottom: 0,
},
html: {
position: "relative",
minHeight: "100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
$(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
console.info("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on('load resize', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5/* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<div class = "content">
<header>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<section>
<p></p>
<p>Lorem ipsum...</p>
</section>
</div>
<footer>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
</footer>Ванильный java-скрипт менее длинный, чем плагин.
На этот вопрос многие ответы, которые я видел, неуклюжи, сложно реализовать и неэффективны, поэтому я подумал, что попробую и предложу свое собственное решение, которое представляет собой крошечный бит css и html
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}<body>
<div class = "body">test as body</div>
<div class = "footer">test as footer</div>
</body>это работает, устанавливая высоту нижнего колонтитула, а затем используя css calc, чтобы определить минимальную высоту страницы, когда нижний колонтитул все еще находится внизу, надеюсь, это поможет некоторым людям :)
Старый поток, который я знаю, но если вы ищете отзывчивое решение, это добавление jQuery поможет:
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
Полное руководство можно найти здесь: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
Я создал очень простую библиотеку https://github.com/ravinderpayal/FooterJS
Очень проста в использовании. После включения библиотеки просто вызовите эту строку кода.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Колонтитулы можно динамически изменять, вызывая указанную выше функцию с другим параметром / идентификатором.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Примечание: - Вам не нужно изменять или добавлять CSS. Библиотека является динамической, что означает, что даже если размер экрана изменится после загрузки страницы, он сбросит положение нижнего колонтитула. Я создал эту библиотеку, потому что CSS решает проблему на некоторое время, но когда размер дисплея значительно меняется, от рабочего стола к планшету или наоборот, они либо перекрывают контент, либо перестают оставаться липким.
Другое решение - CSS Media Queries, но вам придется вручную писать разные стили CSS для экранов разного размера, в то время как эта библиотека выполняет свою работу автоматически и поддерживается всеми основными браузерами, поддерживающими JavaScript.
Редактировать Решение CSS:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
Теперь, если высота отображения больше, чем длина вашего контента, мы зафиксируем нижний колонтитул по низу, а если нет, он автоматически появится в самом конце отображения, так как вам нужно прокрутить, чтобы просмотреть это.
И это кажется лучшим решением, чем JavaScript / библиотека.
Мне не везло с решениями, предложенными на этой странице раньше, но, наконец, этот маленький трюк сработал. Я включу это как другое возможное решение.
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Решение Flexbox
Макет Flex предпочтителен для естественной высоты верхнего и нижнего колонтитула. Это гибкое решение протестировано в современных браузерах и действительно работает :) в IE11.
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
Я сам иногда боролся с этим, и я всегда обнаруживал, что решение со всеми этими div внутри друг друга было беспорядочным решением. Я просто немного повозился с этим и лично обнаружил, что это работает, и это, безусловно, один из самых простых способов:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Что мне нравится в этом, так это то, что не нужно применять дополнительный HTML. Вы можете просто добавить этот CSS, а затем написать свой HTML как всегда
Это сработало у меня, однако я добавил ширину: 100% к нижнему колонтитулу.
Для меня самый лучший способ отображения (нижнего колонтитула) - придерживаться нижней части, но не закрывать все время контент:
#my_footer {
position: static
fixed; bottom: 0
}
Это правильный синтаксис? Положение должно быть статическим или фиксированным?
Решение, аналогичное @gcedo, но без необходимости добавления промежуточного содержимого, чтобы подтолкнуть нижний колонтитул вниз. Мы можем просто добавить margin-top:auto в нижний колонтитул, и он будет перемещен в нижнюю часть страницы независимо от его высоты или высоты содержимого выше.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}<div class = "content">
some content here
</div>
<footer class = "footer">
some content
</footer>Другой подход - дать .contentflex: 1 0 auto;, чтобы сделать его растущим и негерметичным, но margin-top: auto; - хороший трюк, который включает стилизацию нижнего колонтитула, а не "не связанный" .content, что приятно. На самом деле, мне интересно, зачем при таком подходе нужен флекс ..
@YakovL да, основная идея здесь - уловка с верхним краем;) Я знаю, что могу сделать контент таким, но он будет почти таким же, как и предыдущий ответ, где идея состоит в том, чтобы подтолкнуть нижний колонтитул к контенту ... а здесь я хотел этого избежать и подтолкнуть нижний колонтитул только с полем;)
@YakovL flex необходим для margin: auto :) мы не можем использовать его без него ... as margin: auto ведет себя немного иначе с гибким элементом, а затем блокирует элементы. Если вы удалите display:flex, он не будет работать, у вас будет нормальный поток блочных элементов
Да, я вижу, что без него не получится, но не понимаю, почему (что "немного другое")
@YakovL это просто, используя обычный блочный элемент, поток всегда является направлением строки, поэтому будут работать только поля справа / слева, используемые с авто (например, знаменитый margin:0 auto для центрального элемента блока), НО у нас нет направления столбца, поэтому нет маржа авто с верхним / нижним. Flexbox имеет направление как строки / столбца;). Это небольшая разница, но маржа также используется внутри flexbox для выравнивания элемента, поэтому даже в направлении строки вы можете использовать margin-top / bottom auto для выравнивания по вертикали. Подробнее можно прочитать здесь: w3.org/TR/css-flexbox-1/#auto-margins
Гибкие решения помогли мне сделать нижний колонтитул липким, но, к сожалению, изменение тела для использования гибкого макета привело к изменению некоторых макетов наших страниц, причем не в лучшую сторону. Что в итоге сработало для меня:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
Я получил это из ответа ctf0 на https://css-tricks.com/couple-takes-sticky-footer/
Поскольку решение Сетка еще не было представлено, вот оно, всего с двумя декларации для родительский элемент, если мы принимаем height: 100% и margin: 0 как должное:
html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
@keyframes height {to {height: 250px}}<div class = "content">Content</div>
<footer>Footer</footer>The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
}<body style = "height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class = "fixed">
This div element has position: fixed;
</div>
</body>Если вы не хотите, чтобы он использовал фиксированное положение и досадно следил за вами на мобильном телефоне, это, похоже, пока работает для меня.
html {
min-height: 100%;
position: relative;
}
#site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 2px;
background: #32383e;
}
Просто установите html на min-height: 100%; и position: relative;, затем на position: absolute; bottom: 0; left: 0; в нижнем колонтитуле. Затем я убедился, что нижний колонтитул был последним элементом тела.
Сообщите мне, если это не сработает для кого-либо и почему. Я знаю, что эти утомительные стилистические приемы могут вести себя странно в различных обстоятельствах, о которых я даже не думал.
Новое и более простое решение
Я нашел очень простой способ решить эту проблему с помощью Flexbox.
Стиль родителя такой:
display: flex; flex-direction: column; flex: 1; min-height: 100vh;Нижний колонтитул стиля
margin-top: auto.Вот и все!
Демо: https://codepen.io/ferittuncer/pen/Pozdxdm
Старое решение
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "main.css" />
</head>
<body>
<div id = "page-container">
<div id = "content-wrap">
<!-- all other page content -->
</div>
<footer id = "footer"></footer>
</div>
</body>
</html>
main.css:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
Источник: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
Дружественное к REACT решение - (разделитель не требуется)
Крис Койер (почтенный веб-сайт CSS-Tricks) постоянно обновляет свой страница в липком нижнем колонтитуле, используя по крайней мере ПЯТЬ методов для создания липкого нижнего колонтитула, включая использование FlexBox и CSS-Grid.
Почему это важно? Потому что для меня более ранние / старые методы, которые я использовал в течение многих лет, не работали с React - мне пришлось использовать решение Flexbox Криса, которое было легко и работал.
Ниже его CSS-Tricks Flexbox Sticky Footer - просто посмотрите на код ниже, проще не бывает.
(В приведенном ниже примере StackSnippet не полностью отображается нижняя часть примера. Нижний колонтитул показан за пределами нижней части экрана, чего не бывает в реальной жизни.)
html,body{height: 100%;}
body {display:flex; flex-direction:column;}
.content {flex: 1 0 auto;} /* flex: grow / shrink / flex-basis; */
.footer {flex-shrink: 0;}
/* ---- BELOW IS ONLY for demo ---- */
.footer{background: palegreen;}<body>
<div class = "content">Page Content - height expands to fill space</div>
<footer class = "footer">Footer Content</footer>
</body>Крис также демонстрирует этот Решение CSS-Grid для тех, кто предпочитает сетку.
Рекомендации:
Взгляните на http://1linelayouts.glitch.me/, пример 4. Уна Кравец решает эту проблему.
Это создает трехуровневую страницу с верхним, основным и нижним колонтитулами.
-Ваш нижний колонтитул всегда будет внизу, а пространство будет занимать место для содержания;
-Ваш заголовок всегда будет наверху и будет занимать пространство, чтобы соответствовать содержимому;
-Ваш основной всегда будет использовать все доступное оставшееся пространство (оставшуюся часть пространства), достаточное для заполнения экрана, если это необходимо.
HTML
<div class = "parent">
<header class = "blue section" contenteditable>Header</header>
<main class = "coral section" contenteditable>Main</main>
<footer class = "purple section" contenteditable>Footer Content</footer>
</div>
CSS
.parent {
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
}
Я добавлю к @Jimmy: вам также необходимо объявить абсолютное (или относительное) позиционирование для элемента, содержащего нижний колонтитул. В вашем случае это элемент body. Обновлено: я тестировал его на вашей странице с помощью firebug, и, похоже, он работал очень хорошо ...