在CSS中，我們常常需要設置一個元素的高度，但有時候元素的高度隨內容的變化而變化才能達到最佳效果。這時候就需要使用高度自動填充的CSS樣式。下面我們來介紹一下兩種實現高度自動填充的方法：

// 方法一：使用flex布局
.container{
display: flex;
flex-direction: column;
}
.item{
flex-grow: 1;
}
// 方法二：使用grid布局
.container{
display: grid;
grid-template-rows: auto 1fr auto;
}
.item{
grid-row: 2/3;
}

這兩種方法都是利用了CSS布局的特性來實現元素高度自動填充。其中，方法一使用的是flex布局，將容器設為flex布局后，通過設置元素的flex-grow屬性為1，讓元素隨著內容的增加自動填滿空白區域。方法二則是利用grid布局，將容器設為grid布局后，通過設置網格的行高為1fr，即占據剩余空間的比例為1，再將需要自動填充高度的元素放在第2行，讓其自動填充剩余的空間。

需要注意的是，使用高度自動填充的樣式時，元素的內容會影響其高度，所以要注意內容的排版，以及不要設置元素的高度，否則會影響自動填充的效果。