在使用CSS布局網(wǎng)頁時(shí)，我們常常會(huì)遇到一個(gè)問題：當(dāng)內(nèi)容高度不足時(shí)，頁面底部的元素會(huì)被頂上去，無法顯示出來。這個(gè)問題通常出現(xiàn)在使用絕對(duì)定位或浮動(dòng)元素時(shí)。那么怎么解決這個(gè)問題呢？

<style>
body {
position: relative;
margin-bottom: 100px;
/*此處100px是我們希望底部元素占用的高度*/
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
/*底部元素的高度*/
}
</style>

以上代碼的作用是給body元素添加一個(gè)相對(duì)定位，并設(shè)置一個(gè)margin-bottom的值，這個(gè)值要和底部元素的高度相同。這里我們假設(shè)底部元素的高度為100px。接下來，我們使用絕對(duì)定位來讓底部元素固定在底部，同時(shí)設(shè)置其高度為100px，寬度為100%。

當(dāng)頁面內(nèi)容不足以撐滿整個(gè)頁面時(shí)，底部元素依然會(huì)顯示在頁面底部，而不是被頂?shù)巾撁骓敳俊?/p>

除了上面的方法，還有一些其他的解決方案。例如，使用一個(gè)高度等于視口高度的容器，將頁面內(nèi)容放在這個(gè)容器內(nèi)，然后給底部元素添加一個(gè)margin-top值，使其距離容器頂部的距離等于視口高度減去容器高度。

總之，在CSS布局時(shí)，我們需要注意這個(gè)問題，遇到這樣的情況時(shí)，可以采用上述的解決方案，來保證底部元素始終顯示在頁面底部。