可變高度的粘性頁腳

我知道有很多相同的主題，但是有沒有任何CSS方法可以將頁腳粘貼到高度爲％的頁腳中，而不會由於絕對位置而溢出主體和頁眉？可變高度的粘性頁腳

我想這樣堅持一個：

html,body{ 
    height: 100%; 
} 

#header{ 
    background-color: yellow; 
    height: 100px; 
    width: 100%; 
} 

#holder { 
    min-height: 100%; 
    position:relative; 
} 

#body { 
    padding-bottom: 100px; 
} 

#footer{ 
    background-color: lime; 
    bottom: 0; 
    height: 100%; 
    left: 0; 
    position: relative; 
    right: 0; 
}

與HTML：

<div id="holder"> 
    <div id="header">Title</div> 
    <div id="body">Body</div> 
    <div id="footer">Footer</div> 
</div>

代碼在這裏：http://jsfiddle.net/TsRkB/

謝謝！

來源

2013-07-10 Herondil

http://stackoverflow.com/questions/10825879/how-can-a-variable-height-sticky-footer-be-defined-in-pure-css – Pevara

如果你使用顯示：表爲基礎，那麼你的粘頁腳可任何大小，並將隨着內容的增長而下降。

http://dabblet.com/gist/5971212

html { 
    height:100%; 
    width:100%; 
    } 
body { 
    height:100%; 
    width:100%; 
    display:table; 
    table-layout:fixed; 
    margin:0 auto; 
    width:80%; 
    } 
.tr { 
    display:table-row; 
    background:turquoise 
    } 
section.tr { 
    height:100%; 
    background:yellow 
    }

爲

<header class="tr"> <h1>title</h1><p>make me grow</p></header> 
<section class="tr"><article>article</article></section> 
<footer class="tr"> <p>Footer</p><p>make me grow</p></footer>

來源

2013-07-10 23:38:00

謝謝！這是完美的 – Herondil

你能解釋爲什麼這個工程？我無法理解中間的部分如何可以有100％的高度，而另外兩個表格行顯示頁腳和標題的高度不爲零...... – matteo

因爲我們使用display：table和height：100％;如果沒有足夠的內容來填充它們，這個高度將會縮減元素。如果你將其中的一個設置爲100％;當其他人收縮他們的內容時，它會佔用最大的高度。一旦內容物的高度超過100％，整個容器將會增長，但永遠不會低於100％的高度。像

–

-2

固定它適合你，基本上已經把頁腳包裝外面，將其向上... http://jsfiddle.net/sMdmk/4/

#footer{ 
background-color: lime; 
bottom: 0; 
height: 10%; 
left: 0; 
position: relative; 
right: 0; 
top: -10%; 
}

來源

2013-07-10 22:53:52 dave

所有其他解決方案已經過時，並有一大缺點：如果頁腳的高度是可變的或未知的他們沒有工作。

隨着CSS flex model的問世，解決這個問題變得非常容易：雖然大多數人都知道在水平方向上佈置內容，但Flexbox實際上也適用於垂直佈局問題。您只需將垂直部分包裹在柔性容器中，然後選擇要展開的部分。他們會自動佔用其容器中的所有可用空間。

注意標記和CSS是多麼簡單。沒有表黑客或任何東西。

flex模型是supported by all major browsers以及據稱IE11 +，雖然我的IE不能正確呈現此代碼段。

html, body { 
 
    height: 100%; 
 
} 
 

 
#header { 
 
    background: yellow; 
 
    height: 100px; /* can be variable as well */ 
 
} 
 

 
#wrapper { 
 
    display: flex; /* use the flex model */ 
 
    min-height: 100%; 
 
    flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ 
 
} 
 

 
#body { 
 
    flex: 1; 
 
    border: 1px solid orange; 
 
} 
 

 
#footer{ 
 
    background: lime; 
 
}

<div id="wrapper"> 
 
    <div id="header">Title</div> 
 
    <div id="body">Body</div> 
 
    <div id="footer"> 
 
    Footer<br/> 
 
    of<br/> 
 
    variable<br/> 
 
    height<br/> 
 
    </div> 
 
</div>

來源

2014-10-25 00:12:37

相關問題

可變高度的粘性頁腳

回答

相關問題