CSS垂直三分是一種經常用于設計響應式布局（Responsive Web Design，簡稱RWD）的技巧。它可以讓一個區域（比如頁面的Banner區域）在不同的設備上自適應地顯示出一個固定的高度，同時將這個區域分成三等分。

.banner {
display: flex;
flex-direction: column;
height: 600px;
}
.content {
flex: 1;
}
.left, .right {
height: 33.33%;
}
@media screen and (max-width: 767px) {
.banner {
height: auto;
}
.left, .right {
height: auto;
}
}

在上述代碼中，我們首先將.banner元素設置為一個flex容器，并指定它的高度為600像素。然后，我們用flex的屬性來控制內容區域（.content）和左右兩個等分的區域（.left和.right）的高度比例。這里，我們讓左右兩個區域的高度都為整個.banner高度的三分之一，而內容區域占據剩余的全部空間（因為它的flex值為1）。

在移動端屏幕較小的情況下，我們通過@media查詢來將.banner的高度設置為自適應，并且將左右兩個等分的區域的高度也設為自適應。這樣，我們就可以在手機和平板等設備上，讓頁面的Banner區域自適應并展現出我們希望的三段效果了。