<div class="navbar-fixed-bottom row-fluid">
<div class="navbar-inner">
<div class="container">
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;
}
if ($(document).height() <= $(window).height())
$("footer.footer").addClass("navbar-fixed-bottom");
<head>
<style>
table {
min-height: 100% !important;
}
tr#footer {
height: 50px; /*Тут ваша константа*/
}
</style>
</head>
<body>
<table>
<tr id="maincontent">
<td>
<-- Контент ваш -->
</td>
</tr>
<tr id="footer">
<td>
<-- Тело футера -->
</td>
</tr>
</table>
</body>
<body>
ᅠᅠ<header>…</header>
ᅠᅠ<main class="content">…</main>
ᅠᅠ<footer>…</footer>
</body>html, body {
ᅠᅠheight: 100%;
}
body {
ᅠᅠdisplay: flex;
ᅠᅠflex-direction: column;
}
.content {
ᅠᅠflex: 1 0 auto;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 10vh;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 10vh; /*высота футера будет зависеть от высоты экрана*/
}
/* чтобы весь футер заливался */
footer .row{
background-color: #193441;
}
var footer = $('.footer'),
pageContainer = $('.page-container'),
fixClass = 'navbar-fixed-bottom';
function stickyFooter() {
var windowHeight = $(window).height(),
contentHeight = pageContainer.height(),
footerHeight = footer.height();
footer.removeClass(fixClass);
if (contentHeight <= windowHeight-footerHeight){
footer.addClass(fixClass);
}
}
stickyFooter();
$(window).resize(function () {
stickyFooter();
});<div class="page-container">
<section class="header"></section>
<section class="nav"></section>
<section class="content"></section>
</div>
<div class="footer">
</div>
$(function(){
resizeAll();
$(window).bind("resize", function(){
resizeAll();
});
});
$(window).bind('load', function() {resizeAll()});
function footerStickBottom (footer_block) {
$(footer_block).css({'margin-top':0});
var allWindowsHeight = $(window).height();
var footerBottomOffset = $(footer_block).offset().top + $(footer_block).outerHeight();
// console.log(allWindowsHeight);
// console.log(footerBottomOffset);
if (allWindowsHeight > footerBottomOffset) {
var footerMarginTop = allWindowsHeight - footerBottomOffset;
$(footer_block).css({'margin-top':footerMarginTop});
}
}
function resizeAll() {
footerStickBottom ('.footer');
}
=sticky-footer($footer_height, $root_selector:"#root", $root_footer_selector:"#root_footer", $footer_selector:"#footer")
html
:height 100%
body
:height 100%
#{$root_selector}
:min-height 100%
:margin-bottom -#{$footer_height}
#{$root_footer_selector}
:height #{$footer_height}
#{$footer_selector}
:clear both
:position relative
:height #{$footer_height}<html>
<body>
<div class="page">
-- Header --
-- Content --
-- Это если с fix --
<div id="fix"></div>
-- Это если с fix --
</div>
<footer class="footer">
</footer>
</body>
</html><style>
html, body {height:100%; position:relative;}
.page {margin:0 auto 60px; ИЛИ padding: 0 0 60px;}
.footer {height:60px; width:100%; position:absolute; bottom:0;}
ИЛИ если c fix
html, body {height:100%;}
.page {margin:0 auto -60px; }
#fix {padding:0 0 60px;}
.footer {height:60px; position:relative;}
</style><style>
html, body {height:100%; position:relative; overflow-x:hidden;}
body {overflow:hidden; height:auto; min-height:100%;}
.page {margin:0 auto 60px; ИЛИ padding: 0 0 60px;}
.footer {height:60px; width:100%; position:absolute; bottom:0;}
</style>
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
}
});
</script>
min-height: calc(100% - 160px);
Простой
Средний
Простой
