CSS手風琴的高度問題常見問題解答

Question

我使用a link手風琴菜單創建FAQ。問題在於高度是固定的，所以無論文字太長（或在移動設備上），文字都會被切斷。

我試過使用height：auto，overflow：hidden; min-height，！important和所有讓高度響應的標籤，但每當我這樣做時，如果我點擊標籤，滾動手風琴效果不起作用或跳到首頁。

我該如何解決這個問題？我不想使用JS或Jquery ......謝謝！

這裏的CSS

.ac-container input:checked ~ article.ac-small { 
height: 140px; 

}

Answer 1

所有你需要做的是爲下面的屬性設置height:auto。

.ac-container input:checked ~ article.ac-small { 
    height: auto; 
} 

這是一個決定身高的身高。

Plese找到更新代碼的link。

Answer 2

您使用的解決方案僅限於CSS。 CSS3動畫需要定義的高度值才能生成轉換 - 這就是爲什麼您使用的解決方案提供了3個不同的預定義高度。

另一種方法是使用max-height-trick which works for linear animations only though。

最常見的解決方案是通過jQuery的slidetoggle（）切換動畫。