粘性頁腳問題 - 我如何得到內容高度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％減號頁眉和頁腳

回答

相關問題