0

我写了这个粘性页脚模板，我希望我的内容 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;
}
4

3 回答 3

2 
.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);
}
于 2013-08-26T22:41:55.443 回答
1

这可以通过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/

于 2013-08-29T13:03:24.650 回答
0

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

.footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:100px;   /* Height of the footer */
  background:#333;
}
于 2013-03-28T11:30:30.820 回答