位置頁腳底部

我想將頁腳定位在頁面底部。位置頁腳底部

例如，在頁面上沒有太多內容的情況下，我仍然需要底部的頁腳，但是如果頁面的高度超過頁面高度，則必須將頁腳向下推。

只能用CSS來完成，還是需要添加一些jQuery魔法？

enter image description here

來源

2012-09-18 santa

你需要一個棘手的註腳 - http://www.cssstickyfooter.com/ – Jawad

這個問題已經被問了一千次了。 – j08691

@ j08691：我們會回答一千次以上。 – Jawad

您應該使用的sticky footer技術

來源

2012-09-18 19:35:29

這可以通過使用CSS來實現的。

1）安裝在你的HTML

<body> 
    ... 
    <div id="footer">...</div> 
</body>

2）使用CSS的定位將其放置在底部的頁腳。

html { 
    padding-bottom:50px; 
    position:relative; 
} 

body { 
    position:relative; 
    min-height:100%; 
} 

#footer { 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    height:50px; 
}

來源

2012-09-18 19:36:30 matsko

我很厭煩人們說教的立場：絕對;爲粘性頁腳。真？內容溢出時會發生什麼？ – Jawad

是的，我試過這個，但它堅持到底部，而內容下面... – santa

@santa：給他！ – Jawad

應用在這篇文章中描述的技術： http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page。

我發現自己面臨同樣的情況，我認爲這是使用粘腳的最全面描述的方法。

來源

2012-09-18 19:38:17

讓您的頁腳上面一個又一個DIV像這樣並添加明確既要它，它會推動你的頁腳：

<style type="text/css"> 
.push{ 
clear:both; 
height:5px; 
width:5px; 
display:block; 
position:relative; 
margin:0 auto; 
} 
</style> 

    //HTML CODE 
    <div class="push"></div>  
    <div class="fotter"> 
    </div>

來源

2012-09-18 19:48:19

以前所有的CSS解決方案報復頁腳高度恆定。對於所有適當的瀏覽器，以下解決方案可解決頁腳高度動態變化的問題。

html { height: 100%; } 
 

 
body { 
 
    margin  : 0; 
 
    min-height : 100%; 
 
    display  : flex; 
 
    flex-direction: column; 
 
} 
 

 
body > .content { flex-grow: 1; background: ghostwhite; } 
 
body > footer { flex-shrink: 1; background: gold; }

<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis luctus mauris nec lacinia. Maecenas egestas, nisl sed volutpat consectetur, urna orci bibendum lorem, sit amet maximus dolor massa et mi. Duis elit neque, interdum nec euismod sed, interdum ac dui. Maecenas non ornare nibh. Vestibulum malesuada et sem quis mattis. Phasellus a justo non dolor porta faucibus sed id lectus. Nullam imperdiet, velit eu convallis ornare, ipsum augue vestibulum lectus, finibus bibendum nulla libero a augue. Aenean eleifend sapien eu placerat facilisis. Vestibulum pulvinar pretium neque, in ullamcorper orci semper nec. Donec rhoncus velit magna, eget dapibus augue cursus quis. Proin in nisi ut tortor finibus tristique vitae vel libero. Aliquam placerat diam nec consectetur tristique. Praesent bibendum diam id velit pellentesque facilisis. In quis odio nec tortor cursus commodo in eu nisl. Nullam non interdum enim, a faucibus metus. Mauris posuere erat id vestibulum eleifend. </div> 
 
<footer> {{ footer }} </footer>

來源

2015-08-13 17:59:31 kornieff

位置頁腳底部

回答

相關問題