Я уже давно использую платформу bootstrap twitter, и они недавно обновились до версии 3!
У меня возникли проблемы с тем, чтобы липкий нижний колонтитул встал на дно, я использовал шаблон стартера, поставленный на сайте twitter bootstrap, но все же не повезло, какие-либо идеи?
просто добавьте класс navbar-fixed-bottom в нижний колонтитул.
<div class="footer navbar-fixed-bottom">
Ссылаясь на официальный пример липкого нижнего колонтитула Boostrap3,
нет необходимости добавлять <div id="push"></div>, а CSS проще.
CSS, используемый в официальной редакции:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
и существенный HTML:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
Вы можете найти ссылку для этого css в исходном коде липкого нижнего колонтитула.
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
Полный URL: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
Вот метод, который добавит липкий нижний колонтитул, который не требует каких-либо дополнительных CSS или Javascript, кроме того, что уже находится в Bootstrap, и не будет мешать вашему текущему нижнему колонтитулу.
Пример здесь: Легкий липкий нижний колонтитул
Просто скопируйте и вставьте это прямо в свой код. Нет суеты без мусора.
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a>
</div>
</div>
В дополнение к только что добавленному CSS, вам нужно добавить push div, прежде чем закрыть wrap div
Основной структурой для HTML является
<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->
<div id="footer">
footer content here
</div> <!-- end footer -->
Я немного опаздываю на эту тему, но я столкнулся с этим сообщением, поскольку меня просто укусил этот вопрос и, наконец, нашел очень простой способ преодолеть его, просто используйте navbar с navbar-fixed-bottom. Например:
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>
НТН
Здесь Sticky Footer упрощен код на сегодняшний день, потому что он всегда оптимизирует его, и это ХОРОШО:
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<footer>
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Вот мое обновленное решение этой проблемы.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #eee;
text-align: center;
}
.site-footer-links {
font-size: 12px;
line-height: 1.5;
color: #777;
padding-top: 20px;
display: block;
text-align: center;
float: center;
margin: 0;
list-style: none;
}
И используйте его следующим образом:
<div class="footer">
<div class="site-footer">
<ul class="site-footer-links">
<li>© Zee and Company<span></span></li>
</ul>
</div>
</div>
Или
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
Нажатие div должно начинаться сразу после wrap, а не внутри. точно так же
<div id="wrap">
*content goes here*
</div>
<div id="push">
</div>
<div id="footer">
<div class="container credit">
</div>
<div class="container">
<p class="muted credit">© Your Page 2013</p>
</div>
</div>
Липкий пример не работает для меня. Мое решение:
#footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}
Простой js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
Обновление № 1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
Ответ OP:
Добавьте это в свой файл CSS.
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #eee;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
Мне нужен гибкий липкий нижний колонтитул, поэтому я и приехал сюда. Лучшие ответы привели меня в правильном направлении.
Текущий (2 октября 16) Bootstrap 3 css Липкий нижний колонтитул (фиксированный размер) выглядит следующим образом:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Пока нижний колонтитул имеет фиксированный размер, нижний край тела создает толчок, позволяющий вмещать карман для нижнего колонтитула. В этом случае оба установлены на 60 пикселей. Но если нижний колонтитул не фиксирован и превышает 60 пикселей высотой, он будет охватывать содержимое вашей страницы.
Сделайте гибким: удалите край тела и высоту нижнего колонтитула. Затем добавьте JavaScript, чтобы получить высоту нижнего колонтитула, и установите поле marginBottom. Это делается с помощью функции setfooter(). Затем добавьте прослушиватели событий для первой загрузки страницы и изменения размера, которые запускают setfooter. Примечание. Если нижний колонтитул имеет аккордеон или что-то еще, что вызывает изменение размера, без изменения размера окна, вы должны снова вызвать функцию setfooter().
Запустите фрагмент, а затем полноэкранный режим для демонстрации его.
function setfooter(){
var ht = document.getElementById("footer").scrollHeight;
document.body.style.marginBottom = ht + "px";
}
window.addEventListener('resize', function(){
setfooter();
}, true);
window.addEventListener('load', function(){
setfooter();
}, true);html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* additional style for effect only */
text-align: center;
background-color: #333;
color: #fff;
}
body{
/* additional style for effect only not needed in bootstrap*/
padding:0;
margin: 0;
}<div>
Page content
<br> <br>
line 3
<br> <br>
line 5
<br> <br>
line 7
</div>
<footer id="footer" class="footer">
<div class="container">
<p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
</div>
</footer>Подводя итог всем этим, просто держите одно в своем уме, что все, кроме нижнего колонтитула, должно иметь min-height: 100% или немного меньше.
Я пишу свой упрощенный липкий код нижнего колонтитула с заполнением, используя LESS. Этот ответ, вероятно, не соответствует теме, потому что в вопросе не говорится о дополнении, поэтому, если вам интересно узнать этот пост для более подробной информации.
@footer-padding: 40px; // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)
/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;
html {
position: relative;
min-height: 100%;
}
body {
/* This avoids footer to overlap the page content */
margin-bottom: @footer-height;
}
footer{
/* Fix the footer on bottom and give it fixed height */
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
padding: @footer-padding 0;
}
На основе ответа Jek-fdrv я добавил .on('resize', function(), чтобы убедиться, что он работает на каждом устройстве и каждом разрешении:
$(window).on('resize', function() {
if ($(document).height() <= $(window).height()) {
$('footer').addClass("navbar-fixed-bottom");
} else {
$('footer').removeClass("navbar-fixed-bottom");
}
});
Текущая версия bootstrap больше не работает для этой функции. Если вы загрузите свой пример с липким нижним колонтитулом и разместите большое количество контента в области основного тела, нижний колонтитул будет проталкиваться вниз под окном просмотра. Это не липкое.
Вот решение на основе CSS для полностью реагирующего липкого нижнего колонтитула переменной высоты.
Преимущество: нижний колонтитул позволяет изменять высоту, так как высота не должна быть жестко закодирована в CSS.
body {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body > * {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
body > nav + .container {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
padding: 50px 0 0;
margin: 0;
}
footer {
background-color: #f8f8f8;
padding: 15px 0 5px;
border-top: 1px solid #e7e7e7;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Responsive sticky footer of any height</h1>
</div>
<p class="lead">You can have a sticky footer of any height using this CSS. It also fully responsive, no JavaScript needed.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
<p class="text-muted">And some more content.</p>
<p class="text-muted">And more...</p>
</div>
</footer>Это решение было разрешено flexbox, раз и навсегда:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
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;
}
в словах Хамла и Сасса все, что необходимо:
Haml для app/view/layouts/application.html.haml
%html
%head
%body
Some body stuff
%footer
footer content
Sass для app/assets/stylesheets/application.css.sass
$footer-height: 110px
html
position: relative
min-height: 100%
body
margin-bottom: $footer-height
body > footer
position: absolute
bottom: 0
width: 100%
height: $footer-height
на основе http://getbootstrap.com/examples/sticky-footer-navbar/
Если вы хотите использовать bootstrap build в классах для нижнего колонтитула. Вы также должны написать javascript:
$(document).ready(function(){
$.fn.resize_footer();
$(window).resize(function() {
$.fn.resize_footer();
});
});
(function($) {
$.fn.resize_footer = function(){
$('body > .container-fluid').css('padding-bottom', $('body > footer').height());
};
});
Это предотвратит перекрытие содержимого фиксированным нижним колонтитулом, и оно отрегулирует padding-bottom, когда пользователь изменит размер окна/экрана.
В script выше я предположил, что нижний колонтитул помещен непосредственно внутри тега тела:
<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>
Это определенно не лучшее решение (из-за JS, которого можно было бы избежать), но он работает без каких-либо проблем с перекрытием, его легко реализовать и реагировать (height не жестко закодирован в CSS).
#myfooter{
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}<footer>
<div class="footer">
<div class="container-fluid" id="myfooter">
<div class="row">
<div class="col-md-12">
<p class="copy">Copyright © Your words</p>
</div>
</div>
</div>
</div>
</footer>Вот очень простой и чистый липкий нижний колонтитул, который вы можете использовать в бутстрапе. Полностью отзывчивый!
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: red;
}
Пример: Демо-версия CodePen
Вы можете просто попробовать добавить класс на панели навигации нижнего колонтитула:
navbar-fixed-bottom
Затем создайте CSS с именем custom.css и тегом, например.
body { padding-bottom: 70px; }
Использование flexbox - самый простой способ, который я нашел, от парней CSS-tricks. Это истинный липкий нижний колонтитул, он работает, когда содержимое < 100% страницы и > 100% страницы:
<body>
<div class="content">
content
</div>
<footer></footer>
</body>
И CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
Обратите внимание, что это bootstrap-agnostic, поэтому он работает с бутстрапом и без него.
Просто используйте flex! Обязательно используйте тело и основное в своем HTML и это одно из лучших решений (если вам не нужна поддержка IE9). Это не требует фиксированной высоты или аналогичного.
Это рекомендуется для материализации!
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}