堆棧內存溢出
  簡體   English   中英

位於頁面底部的頁腳有固定頁眉

[英]Position footer at bottom of page having fixed header

 原文  2013-08-27 15:09:59  6   6    html/ css/ sticky-footer

問題描述

我想將頁腳放在頁面底部，它還有一個固定的標題...

  • 不是position: fixed - 我不希望它保留在屏幕上，它應該只是在頁面的末尾並且在滾動時表現正常。

  • 不在可見屏幕的底部 - 在頁面的底部，即; 畢竟其他內容。

這是一個更好地解釋的圖表：

頁腳問題

這是代碼：

  • 我准備了一個演示： JSFiddle
  • 或者見下文 
<div id="header">Header</div>
<div id="content">
    <p>Some content...</p>    
</div>
<div id="footer">Footer</div>

body{
    /* Just to enable scrolling in JSFiddle */
    height: 1000px;
}

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

#content{
    width: 100%;
    position: absolute;
    top: 100px; /*Height of header*/
    z-index: 0;
}

#footer{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
}

/*For demo only*/
#header, #footer{
    border: 3px dashed #333333;
    background: #FFFFFF;
}

#content{
    background: #CCCCCC;
    height: 200px;
}

6 個解決方案

解決方案1
 34 已采納  2013-08-27 15:24:15

正如您所提到的， position: fixed會將頁腳放置在視口而不是頁面本身。 因此，我們必須將元素保持在正常流程中，並以某種方式將其放置在頁面底部。

有幾種方法可以實現這一目標，這些方法已經在野外進行了討論。
例如：

粘滯頁腳

在這個答案中，我會選擇Ryan Fait的方法，因為它簡單易懂，也符合您的需求（頁眉和頁腳都有固定高度的情況） 。

考慮以下結構： 

<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>

需要以下步驟：

  1. 將<html>和<body>元素的height設置為100% ，這是下一步1所需的。

  2. 我們需要做的最重要的事情是確保#content足夠高以將#footer推向頁面。 因此，我們給#content一個100%的min-height 。

  3. 到目前為止 ，＃ #content已占據視口高度的100% ，因此我們應該向上拉頁腳以將其定位在頁面底部。 為了做到這一點，我們可以給#content一個負margin-bottom相當於頁腳的height 。 另外，為了確保頁腳顯示在內容的頂部，我們應該relative position頁腳。 在這里演示 。

  4. 可以看出，當#content通過其內容增長時，一些內容會在頁腳后面。 我們可以通過在#content的末尾附加一個spacer元素或者使用padding-bottom和box-sizing: border-box的組合來避免這種情況box-sizing: border-box 2也應該在IE8上得到支持 。

4.1添加墊片

這里的例子 

<div id="content">
    <!-- content goes here -->
    <div class="spacer"></div>
</div>
<div id="footer">Footer</div>

.spacer, #footer { height: 100px; }

4.2 padding-bottom和box-sizing

更新的示例 

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

（請注意，由於簡潔，省略了供應商前綴）

添加標題

  1. 如果標題應保持正常流程 ，您只需將其添加到#content ，如下所示：
    （ 這里的例子 ） 

     <div id="content"> <div id="header">Header</div> ...

  2. 但如果它應該絕對定位 3 ，我們需要將#content元素的內容向下推， 以防止重疊 。

因此，我們可以在#content的開頭添加一個spacer（ 示例在這里 ）： 

<div id="header">Header</div>
<div id="content">
    <div class="header-spacer"></div> 
    <!-- content goes here -->
    <div class="footer-spacer"></div> 
</div>
<div id="footer">Footer</div>

或者使用padding-top和box-sizing的組合，如下所示： 

<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */

    padding-top   : 50px;  /* Equivalent to header's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

更新示例 （請注意，由於簡潔，省略了供應商前綴）

最后但並非不重要！

如今，所有主流的現代Web瀏覽器都支持box-sizing: border-box聲明（包括IE8）。 但是，如果您正在尋找具有更廣泛瀏覽器支持的傳統方式，請堅持使用spacer元素。

1.需要使min-height: 100%處理#content元素（因為百分比值是相對於由<body>建立的包含塊的height ）。 另外<html>應該有一個明確的height來制作height: 100%來處理<body> 。

2. box-sizing: border-box使UAs計算box-sizing: border-box的width / height ，包括填充和邊框。

3. 根據規范 ，絕對定位的元素是具有absolute或fixed position的元素。

解決方案2
 3  2013-08-27 15:20:47

你幾乎得到了它。 你需要的是一個容器。

這是我的修改位： JSFiddle更新

添加容器div： 

<div id="container">
    <div id="header"></div>
    <div id="page"></div>
    <div id="footer"></div>
</div>

然后使位置相對，高度100％： 

#container {
    height: 100%;
    position: relative;
}

並確保該位置對於頁腳是絕對的。

解決方案3
 3  2013-12-28 19:58:22

或者對於那些通過谷歌搜索找到這篇文章的人，想要一個更短的答案，沒有包裝（因為你不需要它們）： 

html { height: 100%; }
body { min-height: 100%; position: relative; padding-bottom: 3em; }
.footer { height: 3em; position: absolute; bottom: 0; }

完成后，頁面現在至少有100％的屏幕高度，頁腳位於頁面底部，而不是“屏幕”的底部。 如果頁面比屏幕長，它仍然在底部，我們沒有人為的“包裝元素”或類似物做到： body元素已經是我們需要的包裝器=）

唯一需要注意的是，身體邊距需要與頁腳高度相同，但隨后為負值，因為“bottom：0”規則將使頁腳從底部開始而不是基線錨定。 然后，再次，作為CSS，.less或.styl，這是平凡的保證。

解決方案4
 0  2013-08-27 16:50:34

要做到這一點很簡單： 

#header {
    position: fixed;
    width:100%;
    height:100px;
    top:0px;
    z-index:2;
}
#content, #footer {
    position: relative; /* or leave it static as by default */
    z-index:1;
}
body,div {
    margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */
}
#content {
    margin-top: 100px; /* the same value as header's height */
}

的jsfiddle

解決方案5
 0  2015-01-22 06:08:18

But if you want the footer to take full size of the screen while #wrapper is 1000px and centered you would do:


<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>

html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#wrapper-inner {
margin: 0 auto;
width: 1000px;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}

解決方案6
 0  2018-12-14 20:23:33

我在網絡開發方面很陌生，而且我知道這已經得到了解答，但這是我發現解決它的最簡單的方法，我覺得有些不同。 我想要一些靈活的東西，因為我的頁腳可以在Web應用程序的不同部分具有不同的高度。 最后我使用了FlexBox和一個墊片。

  1. 首先設置html和body的高度 
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

我假設我們的應用程序的column行為，如果您需要添加標題，英雄或任何垂直對齊的內容。

  1. 創建spacer類 
.spacer {
    flex: 1; 
}
  1. 所以稍后您的HTML可能會像 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

你可以在這里玩它https://codepen.io/anon/pen/xmGZQL

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 頁腳底部有一個帶有固定標題的頁腳 頁腳未固定在頁面底部 頁腳在頁面底部但未固定 如何使頁腳停留在頁面底部？ （不使用位置：固定） 在不使用固定位置的情況下將頁腳設置為頁面底部。 將div內容拉伸到頁面底部的固定位置頁腳 將頁腳放在頁面底部 頁腳未粘貼到頁面底部（未固定） 如何使一個邊框區域圍繞頁面的內容，其中頁腳固定在頁面的底部，標題固定在頂部 使頁腳停留在頁面底部（不固定到底部）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM