CSS是我們在網頁設計中常用的樣式表語言，它可以幫助我們美化網頁的外觀，包括大小、顏色、字體等等。而其中的一個常用功能就是固定頁腳，讓它即使在滾動頁面的過程中也能保持在底部固定不動。
要實現這個功能，我們可以使用CSS3中的新特性flexbox。首先我們需要用HTML來定義頁面的結構，然后在CSS中添加flexbox的屬性，實現固定頁腳的效果。
HTML結構：
<html>
<body>
<div id="wrapper">
<div id="content">
<p>這里是網頁內容</p>
</div>
<div id="footer">
<p>這里是頁腳內容</p>
</div>
</div>
</body>
</html>
CSS樣式：
html, body {
height: 100%;
}
#wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#content {
flex: 1 0 auto;
}
#footer {
flex-shrink: 0;
}在這個例子中，我們將整個頁面的高度設置為100%。然后我們在id為wrapper的<div>標簽中添加了flexbox屬性，將這個<div>自身的高度設置為100%。接著我們將id為content的<div>標簽設置為flex: 1 0 auto;，意思是它的高度可以自適應。最后我們將id為footer的<div>標簽設置為flex-shrink: 0;，防止它在窗口大小改變時縮小。
通過這些樣式屬性的設置，我們就實現了一個固定頁腳效果。無論頁面如何滾動，頁腳都會一直保持在底部，讓網頁的美觀程度得以提升。
上一篇css頁面上有白邊