Question

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

Answer 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);
}

Answer 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/

Answer 3

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

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

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

3 个答案: