使div貼在頁面底部

所以我做了一個聯繫頁面，我希望頁腳div粘貼到頁面底部，而不是在聯繫表單之後。使div貼在頁面底部

但是，如果我把所有的東西放在高度爲100％的容器div;並使頁腳底部爲0;那麼頁面將是「太長」，你必須滾動，等等......

我的CSS迄今：

#footer{ 
    background-color:#fff; 
    font:bold 14px; 
    color:#1E88E5; 
    width:100%; 
    height:auto; 
    padding:1%; 
    border-top:1px solid #1E88E5; 

}

頁腳僅僅是一個正常的全寬度的div一些居中文本大氣壓。

來源

2016-08-23 mheonyae

您是否想在不需要滾動的情況下顯示頁腳？ –

可能的重複：[讓div始終停留在頁面內容的底部，即使存在滾動條時也是如此（http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-內容 - 所有的時間，甚至當這裏是滾動） – AlexG

我不希望它總是在底部可見，...我希望它堅持頁面結束，但萬一頁面得到「更長「，你會向下滾動然後看到頁腳 – mheonyae

如果您需要粘腳，您可以使用2種解決方案。

解決方案1：

HTML：

<div class="wrap"> 
    Content 
</div> 
<div class="footer"> 
    Sticky Footer 
</div>

CSS：

body, html, .wrap{ 
    height:100%; 
} 

body > .wrap{ 
    height:auto; 
    min-height:100%; 
} 

.wrap:after { 
    content: ""; 
    display: block; 
    height: 100px; 
} 

.footer{ 
    background:#662e8c; 
    margin-top:-100px; 
    height:100px; 
    color:#fff; 
    position:relative; 
    line-height:180%; 
    padding:0 10px; 
}

實施例：https://jsfiddle.net/ta1amejn/

溶液2（配表屬性）：

HTML：內容頁腳

CSS：

body{ 
    display:table; 
    width: 100%; 
} 

html, body{ 
    height:100%; 
} 

.main{ 
    height:100%; 
    width:100%; 
    padding-bottom:20px; 
    background:#eee; 
    display:table-row; 
} 

.footer{ 
    /*height:30px;*/ 
    line-height:30px; 
    width:100%; 
    background:#00f0ad; 
    display:table-row; 
}

實施例：https://jsfiddle.net/zbtaoq1b/

如果你想有一個固定的頁腳使用此解決方案：

.footer{ 
    position: fixed; 
    bottom: 0; 
}

來源

2016-08-23 10:59:41

你或許可以用position: fixed實現這一目標。

.footer { 
    position: fixed; 
    bottom: 0; 
}

有了這個，你將需要彌補的頁面所以建議增加一個padding-bottom到.main是頁腳的高度的底部。

.main { 
    padding-bottom: 30px /*whatever the height of your footer is*/ 
}

來源

2016-08-23 11:01:36 Guy

Pritesh Gupta's solution作品對我很好：

我複製+粘貼的情況下，代碼的站點關閉：

這裏的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sticky Footer</title> 
    </head> 

    <body> 
    <main>stuff</main> 
    <footer>&copy; 2016</footer> 
    </body> 
</html>

這裏的CSS：

body { 
    margin: 0; 
} 

main { 
    min-height: calc(100vh - 4rem); 
} 

footer { 
    height: 4rem; 
}

我不知道它是否適用於舊版瀏覽器，但我並不擔心自己。

這也取決於你知道你的頁腳的高度，但值得指出的是，你不必像上面的代碼那樣手動設置高度，因爲如果你知道你總能知道它是什麼多少垂直填充和行高的內容...

希望這可以幫助，我花了大部分時間在Web上的每一個粘性頁腳教程嘗試之前絆倒這種技術，而other技術做這個工作需要最少的努力。

來源

2016-08-26 09:45:18 stephenmurdoch

你可以用display: flex輕鬆做到這一點。你不在乎身高body或wrapper標籤。

例子：請更改main tag任何價值的高度，如果你想，footer總是粘底（不position: fixed）。

https://codepen.io/tronghiep92/pen/dzwRrO

HTML標記

<div id="wrapper"> 
    <header>my header</header> 
    <main>main content, please change height</main> 
    <footer> 
    my footer 
    </footer> 
</div>

CSS解決方案

#wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

header { 
    height: 100px; 
    background: yellow; 
} 

footer { 
    height: 50px; 
    background: red; 
    margin-top: auto; /* this is the solution */ 
} 

main { 
    height: 100px 
}

或者你可以：

#wrapper { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-height: 100vh; 
} 

header { 
    height: 100px; 
    background: yellow; 
} 

footer { 
    height: 50px; 
    background: red; 
} 

main { 
    flex: 1; 
    height: 100px; 
}

來源

2017-08-31 03:10:37 tronghiep92

使div貼在頁面底部

回答

相關問題