Как создать липкий нижний колонтитул, который хорошо играет с Bootstrap 3
С или без верхней навигации, это очень распространено для сайтов, чтобы иметь липкий нижний колонтитул. Bootstrap имеет возможность легко создавать основные нижние колонтитулы, но нет такого объекта для создания Липки колонтитулы - есть большая разница.
погугли этот вопрос покажет, что сотни, если не тысячи разработчиков, такой же вопрос, но без ответа.
Как ни странно,загрузочный документации сама страница имеет липкий нижний колонтитул наряду со стилем bootstrap и фиксированной верхней навигационной панелью. Это все пользовательские css, хотя, и не часть структуры. Так что очевидный путь-взять и переработать их пользовательских стилей, так как это очевидно, играет хорошо в рамках Bootstrap, но это кажется более болезненным, чем это должно быть.
посмотреть это plunkr для примера страницы с загрузочной верхней навигационной панелью и нежелательной, не липкой нижняя сноска.
:(спасибо Softlayer-за графика)
Нужные Решение:
конечно, нижний колонтитул должен быть отзывчивым и кросс-браузерным, а также...
6 ответов
ответ, как точки Schmalzy, может быть найден здесь в разделе Примеры сайта getbootstrap.
но этот пример не включает в себя шапку. Для фиксированной верхней навигации с липким нижним колонтитулом см. этой plnkr, или код ниже.
стиль CSS:
/* Styles go here */
/* 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;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</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><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</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.</p>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
липкие решения нижнего колонтитула, которые полагаются на нижние колонтитулы фиксированной высоты, выпадают из фаворита с отзывчивыми подходами (где высота нижнего колонтитула часто меняется в разных точках разрыва). Самое простое реагирующее липкое решение нижнего колонтитула, которое я видел, включает использование display: table на контейнере верхнего уровня, например:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
лучший способ сделать следующее:
HTML-код:Нижний Колонтитул
CSS:CSS для липкого нижнего колонтитула
Пример кода HTML:
<div class="container">
<div class="page-header">
<h1>Sticky footer</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.</p>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
пример кода 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;
}
еще одна небольшая настройка может сделать его более совершенным (зависит от вашего проекта), поэтому он не повлияет на нижний колонтитул на мобильных представлениях.
@media (max-width:768px){ .footer{position:absolute;width:100%;} }
@media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
Я искал простой способ сделать липкий нижний колонтитул работает.
Я только что применил class="navbar-fixed-bottom " и это сработало мгновенно
Единственное, что нужно иметь в виду, это настроить настройки нижнего колонтитула для мобильных устройств.
Ура!
для тех, кто ищет легкий ответ, вы можете получить простой пример работы отсюда:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px /* Height of the footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* Example value */
}
просто играть с body ' s margin-bottom для добавления пространства между содержимым и нижним колонтитулом.
я подробно остановлюсь на том, что robodo сказал в одном из комментариев выше, очень быстрый и красивый и, что более важно, отзывчивый (не фиксированная высота) подход, который не включает в себя никаких хаков, чтобы использовать flexbox. Если вы не ограничены поддержкой браузеров, это отличное решение.
HTML-код
<body>
<div class="site-content">
Site content
</div>
<footer class="footer">
Footer content
</footer>
</body>
в CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
поддержка браузера можно проверить здесь:http://caniuse.com/#feat=flexbox
более общая проблема решения с использованием flexbox:https://github.com/philipwalton/solved-by-flexbox