CSS中的高度和背景屬性是網頁布局中非常重要的部分。一個好的高度和背景布局可以讓網站看起來更加美觀和專業。接下來我們來探討一下如何使用CSS高度和背景屬性實現自適應布局。

/* 高度自適應 */ 
 .container {
min-height: 100vh; /* 設置容器最小高度為視窗高度 */
display: flex;     /* 使用 flex 彈性布局 */
flex-direction: column; /* 垂直方向布局 */
justify-content: space-between; /* 兩個子元素之間的空間占滿整個容器 */
 }
/* 背景自適應 */
 .bg {
background-image: url('bg.jpg'); /* 背景圖片 */
background-repeat: no-repeat;    /* 圖片不重復 */
background-size: cover;          /* 圖片自適應容器大小 */
 }

上述代碼中，我們首先通過設置容器最小高度為視窗高度來實現高度的自適應。然后使用了flex彈性布局，將子元素垂直排列，并讓它們之間的空間占滿整個容器。這樣就能在各種設備上實現自適應高度。

而在背景自適應部分，我們設置了背景圖片，并通過設置背景尺寸為 cover，使圖片能夠自適應容器大小。這樣就能讓背景圖在不同設備上完美適應，不會出現拉伸或者變形的情況。

總的來說，CSS的高度和背景屬性非常靈活，通過一些簡單的設置就能實現自適應布局。我們要做的就是仔細思考網頁的布局需求，并靈活巧妙地運用CSS屬性來達到最佳效果。