CSS中有一個常見的問題是如何讓某個元素在其容器中垂直居底。在博客布局中，底部有一個固定高度的導航欄，而主要內容區域的高度會隨著文章長度而變化。如果要讓文章內容在導航欄上下居底，我們需要使用一些特定的CSS屬性。

/* 容器的樣式 */
.container {
position: relative;
height: 100%;
}
/* 導航欄的樣式 */
.navbar {
position: absolute;
width: 100%;
height: 50px; /* 固定高度 */
bottom: 0; /* 自底部開始定位 */
}
/* 內容區域的樣式 */
.content {
position: absolute;
top: 0; /* 自頂部開始定位 */
bottom: 50px; /* 保證底部與導航欄相差50px */
left: 0;
right: 0;
overflow: auto; /* 內容過長時自動出現滾動條 */
}

上面的代碼中，我們通過將容器的position屬性設置為relative，使得內容區域和導航欄可以根據容器進行定位。導航欄的position屬性設置為absolute，使其可以脫離文檔流，從而讓內容區域占據整個容器的高度。

接著，我們在導航欄的樣式中添加了bottom屬性，將其定位在容器的底部。在內容區域的樣式中，我們使用了top和bottom屬性，將其限制在容器的上下邊緣內，并使用了overflow:auto屬性，當內容區域過長時，出現滾動條。

通過以上CSS樣式的設置，我們可以讓主要內容區在其容器內在導航欄上下居底，使得整個布局更加美觀和整齊。