Question

即使正文中的内容无法填充浏览器视口，我也希望页脚保留在原型中。当内容的高度足以填充视口时，我不希望它与主体内容重叠。在网上搜索我大多发现＆＃34;粘＆＃34;与内容重叠的页脚甚至内容足以填满视口。到目前为止，这正是我正在尝试的（我也在使用bootstrap3）

HTML（在<body>标记内）：

<footer style="background-color: #b77b48;color:white;padding:10px">
<div class="container">
<div class="row">

<div class="col-lg-4">
<h4 class="text-center"> About</h4>
<p class="text-justify">This website is blah bah</p>
</div>
<div class="col-lg-4">
<h4 class="text-center">Links</h4> 
<p class="text-center">
<a href=# style="color:white">Rules & FAQ</a><br />
<a href=# style="color:white">Privacy Policy</a><br />
<a href=# style="color:white">Contact Us</a><br />
<a href=# style="color:white">Other Projects</a><br />
</p>
</div>
<div class="col-lg-4">
<h4 class="text-center">Find us at</h4> 
<p style="text-align: center;"><i class="fa fa-github fa-3x" ></i> &nbsp;
<i class="fa fa-twitter fa-3x"></i> &nbsp;
<i class="fa fa-youtube fa-3x"></i>
</p>
</div>
</div>
</div>
<footer>

CSS：

 body,html{
 min-height:100%;
}
.container{
 /*min-height:20%;*/
}
footer{
 height:180px;
 bottom:0;
}

Answer 1

我认为阅读本文对您有用：

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

你也可以查看这个小提琴：

http://jsfiddle.net/giovapanasiti/atCUX/

$(function() {
    // Store references to all rows for future use
    var rows = $(".Row"),
        content = rows.filter(".Expand");

    // Test first to see if `display: table;` is being used
    if (rows.css("display") === "block") {
        function reflow() {
            var height = rows.parent().height();
            // Subtract height of fixed rows
            rows.not(content).each(function() {
                height -= $(this).height();
            });
            content.height(height);
        }
        // Run immediately on DOM ready…
        reflow();
        // And again on page load and resize events
        $(window).bind("load resize", reflow);
    }
});

（这不是全部由我制作的。我多年前分叉了，不记得我带它去哪里了）

Answer 2

确保页脚位于HTML的底部，我需要查看更多的HTML以了解为什么它不会转移到底部，所有您显示的都是页脚本身。尝试div而不是页脚标记，只是一个想法

Answer 3

您需要查看将以下内容添加到您的css中：

position:fixed然后将body一些padding-bottom与<footer>

的高度相匹配

我以2种方式之一阅读你的问题

1）这里有一个jsfiddle示例，表示页脚始终锁定在页面底部，正文内容将在其后面滚动http://jsfiddle.net/S4Qpa/3/

2）这里有一个jsfiddle示例，表示页脚始终锁定在页面底部，正文内容将在其上方空间中滚动http://jsfiddle.net/S4Qpa/2/

2）的一个问题是你可能会发现你遇到了移动触摸滚动的奇怪问题，所以我肯定会推荐第一个

页脚不粘到底部

3 个答案: