在網頁設計中，我們經常需要設置元素的高度。但是有時候，元素的具體高度可能難以確定，這時候我們可以設置元素的可用高度。 首先，我們需要了解兩種高度的概念：元素的高度和元素的可用高度。元素的高度指的是元素在文檔流中所占的高度，包括元素的內邊距、邊框和外邊距。而元素的可用高度則指的是元素實際可顯示內容的高度，不包括元素的內邊距、邊框和外邊距。 在CSS中，我們可以使用height屬性來設置元素的高度。例如：

p {
height: 100px;
 }

上面的代碼將會把所有的段落元素的高度設置為100像素。但是這樣設置會忽略元素的內邊距、邊框和外邊距，導致實際顯示內容變得擁擠。 為了解決這個問題，我們可以使用box-sizing屬性來改變元素的盒模型。設置box-sizing為border-box可以讓元素的內邊距和邊框都計算在元素的高度內。例如：

p {
box-sizing: border-box;
height: 100px;
padding: 10px;
border: 1px solid #000;
 }

上面的代碼將會把所有的段落元素的高度設置為100像素，同時考慮元素的內邊距和邊框。但是這樣設置又會忽略元素的外邊距，導致元素之間變得靠得很近。 為了解決這個問題，我們需要使用calc()函數。calc()函數可以讓我們在設置元素的高度時，同時考慮元素的內邊距、邊框和外邊距。例如：

p {
box-sizing: border-box;
height: calc(100px - 20px);
padding: 10px;
border: 1px solid #000;
margin-bottom: 20px;
 }

上面的代碼將會把所有的段落元素的高度設置為100像素，同時考慮元素的內邊距、邊框和外邊距，保證元素之間的間距為20像素。這樣設置，就可以讓網頁更美觀、更舒適了。