CSS3可以很方便地實現固定頭部和底部。

固定頭部的思路是將頭部設置為一個固定的位置，并讓內容在頭部下方開始編排。我們需要使用position屬性并將其設置為fixed值，然后再設置top和left值。例如：

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ccc;
}

這樣，當頁面滾動時，頭部會一直保持在頁面最上方。

固定底部的思路類似，但是我們需要將底部放置到頁面的底部，并使其一直顯示在那里。我們可以使用position和bottom屬性來實現。例如：

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ccc;
}

這樣，當頁面內容少于一屏幕時，底部會一直保持在頁面底部。但是，當頁面內容超過一屏幕時，底部將被內容覆蓋。

為了解決這個問題，我們可以使用CSS3的flexbox布局。我們將頁面分成三個部分：頭部、內容和底部，并使用flexbox讓內容部分占據剩余的空間。例如：

.container {
display: flex;
flex-direction: column;
height: 100vh; // 100% viewport height
}
header {
background-color: #ccc;
}
main {
flex: 1;
}
footer {
background-color: #ccc;
}

這樣，當內容超過一屏幕時，底部會自動移動到下方，并保持在頁面底部。

總的來說，使用CSS3固定頭部和底部非常簡單。只需要設置好position和top（或bottom）屬性，或者使用flexbox布局即可。這些方法不僅可以讓頁面看起來更美觀，還可以提高用戶的體驗。