在進行網頁設計時，有時我們需要對網頁中的布局進行調整，尤其是在上下布局方面。那么，怎么才能使這種布局的高度自適應呢？這時，就需要使用到CSS的一些技巧。

body{
height: 100%; /*將body元素高度設置為100%*/
display: flex; /*使用flex布局*/
flex-direction: column; /*設置主軸方向為豎直方向*/
}
header{
flex-shrink: 0; /*設置header元素不會縮小*/
background-color: #ccc;
height: 100px;
}
main{
flex: 1; /*將main元素的flex-grow屬性設置為1，占據剩余空間*/
background-color: lightblue;
}
footer{
flex-shrink: 0; /*設置footer元素不會縮小*/
background-color: #ccc;
height: 50px;
}

上面的代碼中，首先將body元素的高度設置為100%，然后使用了flex布局，并設置了主軸方向為豎直方向。header和footer元素的高度是固定的，其中header元素的flex-shrink屬性設置為0，表示該元素不會縮小。而main元素的flex-grow屬性設置為1，表示該元素會占據剩余的空間，從而實現了布局的自適應。

總之，使用CSS的flex布局可以使上下布局的高度自適應，從而更好地適應不同設備的屏幕尺寸和不同瀏覽器窗口的大小。當然，還有很多其他技巧可以實現這種布局，但flex布局是其中最為靈活和方便實現的一種方法。