粘性页脚问题 - 如何获得 100% 的内容高度减去页眉和页脚答案

【问题标题】：Sticky footer issues - How do I get content height 100% minus Header and Footer粘性页脚问题 - 如何获得 100% 的内容高度减去页眉和页脚
【发布时间】：2013-03-18 18:31:50
【问题描述】：

我已经编写了这个粘性页脚模板，我希望我的内容 div 具有 100% 的最小高度。问题是，当我这样做时，它会在页脚下方延伸，并具有额外的页眉高度 + 页脚高度。我怎样才能解决这个问题？它也应该支持短内容和长内容，与粘性页脚相同。我需要使用 jQuery 吗？我是初学者，所以请亲一下。

HTML

    <body>
    <form id="form1" runat="server">
        <div class="wrapper">
            <div class="header"></div>
            <div class="content">

                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>

            </div>
            <div class="footer"></div>
        </div>
    </form>
</body>

CSS

html, body {
    min-height:100%;
    height:100%;
}

#form1 {
    min-height:100%;
    height:100%;
    margin:0;
}

.wrapper {
   min-height:100%;
   height:100%;
   position:relative;
}
.header {
   background:#990066;
   height:100px;
}
.content {
   background:#ffffcc;
   padding-bottom:100px;   /* Height of the footer */
   min-height: 100%;
   width: 1120px;
   margin: 0 auto;
}
.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   /* Height of the footer */
   background:#333;
}

【问题讨论】：

标签： footer sticky css

【解决方案1】：

.content {
    min-height: calc(100% - 100px - 100px);   /* minus header-height minus footer-height */
}

内容元素的最小高度设置为 100% 减去 100px（页眉高度）和 100px（页脚高度）。使用 CSS 函数calc()，浏览器计算出准确的高度。这在跨浏览器兼容性方面会更好：

.content {
    min-height: -webkit-calc(100% - 100px - 100px);
    min-height: -moz-calc(100% - 100px - 100px);
    min-height: calc(100% - 100px - 100px);
}

【讨论】：

你能说一些话来解释你对 OP 的回答吗？
其实由于 Opera 中的一些问题（底部空白）我推荐使用一个简短的 jQuery sn-p 来计算内容元素的高度。你可以在这里找到它（nicholasbarger.com/2011/08/04/…）这是一个更可靠的解决方案，你不必担心浏览器兼容性问题:)

【解决方案2】：

这可以通过 css 来实现。

HTML（注意页脚 div 的嵌套略有变化）

<body>
    <form id="form1" runat="server">
        <div class="wrapper">
            <div class="header"></div>
            <div class="content">
                ...
            </div>
        </div>
        <div class="footer"></div>
    </form>
</body>

CSS

html, body, #form1 {height: 100%;}

.wrapper {
    min-height: 100%;
}

.content {
    padding-bottom: 150px; /* must be same height as the footer */
}  

.footer {
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
}

改编自这里。

http://www.cssstickyfooter.com/using-sticky-footer-code.html

也是一个快速的小提琴http://jsfiddle.net/Zf8Fh/3/

【讨论】：

【解决方案3】：

你只需要固定 .footer 类在 css 中的位置，如下所示

.footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:100px;   /* Height of the footer */
  background:#333;
}

【讨论】：

我不想要一个固定的页脚。内容少的时候，就得贴在底部。当有长内容时，我希望页脚在内容末尾自然下降。页脚不是我的问题。我希望内容 div 也一样：当内容很少时，我希望内容 div 一直延伸到页脚。当有很多内容时，我希望内容 div 自然拉伸以包含所有内容。
我认为不使用js是不可能的，所以你应该添加一些js来根据页面高度在内容div中添加高度。