粘性页脚问题 - 我如何得到内容高度100％减号页眉和页脚

我写了这个粘性页脚模板，我希望我的内容div具有100％最小高度。问题是，当我这样做时，它会在页脚下面延伸，并具有页眉高度+页脚高度的额外高度。我怎样才能解决这个问题？它应该同样支持短内容和长内容，与粘滞页脚相同。我需要使用jQuery吗？我是初学者，所以请KISS。粘性页脚问题 - 我如何得到内容高度100％减号页眉和页脚

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

来源

2013-03-28 Anamaria Miehs

这可以用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-29 13:03:24 AlexLittlejohn

你只需要在CSS .footer类的固定现在的位置是像下面

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

来源

2013-03-28 11:30:30 Nilesh

我不想一个固定的页脚。当内容很少时，它必须坚持到底。当内容很长时，我希望页脚在内容结尾处自然下滑。页脚不是我的问题。我想要的内容div相同：当内容很少时，我希望内容div伸展到页脚。当内容很多时，我希望内容div自然伸展以包含所有内容。 – 2013-03-28 11:32:24

我认为它不可能不使用js所以你应该添加一些js根据页面的高度在内容div中添加高度。 – Nilesh 2013-03-28 12:01:03

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

内容元素的

最低高度设置为100％减去100px（heig标题的ht）和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-26 22:41:55 minke011

你可以说一些话来解释你对OP的回答吗？ – theJollySin 2013-08-26 23:17:38

实际上，由于Opera中的一些问题（底部为空白），我建议使用一个简短的jQuery代码片段来计算内容元素的高度。你可以在这里找到它（http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/）这是一个更可靠的解决方案，你不必担心浏览器兼容问题:) – minke011 2013-08-29 21:18:16

粘性页脚问题 - 我如何得到内容高度100％减号页眉和页脚

回答

相关问题