CSS - 即使沒有足夠的內容，也可以將頁腳放在頁面底部

使用HTML/CSS時，即使存在no enough content，我也需要將footer放置在頁面的bottom上。CSS - 即使沒有足夠的內容，也可以將頁腳放在頁面底部

萬一有很多內容導致滾動，很容易實現這一點。當沒有足夠的內容時就會出現問題，因爲在這種情況下，頁腳上升。

在這裏，你有可能澄清圖像這更多：

我有以下起始代碼：

CSS

body { 
    margin: 0; 
} 
#header, #content, #footer { 
    padding: 10px; 
} 
#header { 
    height: 100px; 
    background-color: #abcdef; 
} 
#content { 
    bottom: 100px; 
    left: 0; 
    right: 0; 
    background-color: #F63; 
    overflow: auto; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background-color: #abcdef; 
}

HTML

<div id="header"> 
There is the Header 
</div> 
<div id="content"> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
    hello world<br/> 
</div> 
<div id="footer"> 
There is the Footer 
</div>

的jsfiddle預覽：https://jsfiddle.net/bk5ow9us/ （嘗試調整窗口的高度）

就如何實現這一目標的任何想法？

重要

我需要的工作溶液也爲IE（版本> = 11），而不僅僅是FF和鉻。

來源

2017-04-18 Angel

這樣嗎？ https://jsfiddle.net/bk5ow9us/1/ –

僅供參考，有大約3000個問題（字面上）已經在網站上提出。我敢打賭，你可以通過一點搜索找到答案。 – TylerH

Ofc這是一個重複的問題，幾乎每天都會問到這個問題。我們應該將他們指向SO文檔，這是他們的全部點 – StefanBob

如果您願意，可以使用flexbox粘性頁腳佈局。

min-height: 100vh;而不是height: 100%;雖然

html, body { 
 
    min-height: 100vh; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
} 
 

 
.content { 
 
    /* Include `0 auto` for best browser compatibility. */ 
 
    flex: 1 0 auto; 
 
} 
 

 
.header, .footer { 
 
    background-color: grey; 
 
    color: white; 
 
}

<div class="header"> 
 
    <h2>Header</h2> 
 
</div> 
 

 
<div class="content"> 
 
    <h1>Content</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p> 
 
</div> 
 

 
<div class="footer"> 
 
    <h4>Footer</h4> 
 
</div>

來源

2017-04-18 16:52:12 StefanBob

你有一個jsfiddle的例子嗎？ – Angel

已更新的答案，即使您可以像我一樣複製+粘貼 – StefanBob

它不適用於IE，請檢查此圖像：http://image.ibb.co/m1UAvk/image.png，我必須添加一些東西到CSS，使其在那裏工作？ – Angel

-1

我有同樣的問題，我會用。這解決了它。

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

來源

2017-04-18 16:56:53 chhhris

您可以通過兩種方式來完成。一種是使用flexbox，並將內容區域設置爲flex-grow，以便默認填充可用空間。

body { 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
#header, #content, #footer { 
 
\t padding: 10px; 
 
} 
 
#header { 
 
    height: 100px; 
 
    background-color: #abcdef; 
 
} 
 
#content { 
 
    flex: 1 0 0; 
 
    background-color: #F63; 
 
} 
 
#footer { 
 
    height: 100px; 
 
    background-color: #abcdef; 
 
}

<div id="header"> 
 
There is the Header 
 
</div> 
 
<div id="content"> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
</div> 
 
<div id="footer"> 
 
There is the Footer 
 
</div>

或者你可以絕對定位頁腳和使用padding上body預留空間，頁腳會。

* {box-sizing:border-box;} 
 
body { 
 
    margin: 0; 
 
    padding-bottom: 100px; 
 
    position: relative; 
 
} 
 
#header, #content, #footer { 
 
\t padding: 10px; 
 
} 
 
#header { 
 
    height: 100px; 
 
    background-color: #abcdef; 
 
} 
 
#content { 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #F63; 
 
} 
 
#footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100px; 
 
    background-color: #abcdef; 
 
}

<div id="header"> 
 
There is the Header 
 
</div> 
 
<div id="content"> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/>hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
\t hello world<br/> 
 
</div> 
 
<div id="footer"> 
 
There is the Footer 
 
</div>

來源

2017-04-18 17:00:47

CSS - 即使沒有足夠的內容，也可以將頁腳放在頁面底部

回答

相關問題