帶有HTML和CSS的動態尺寸粘性側邊欄

使用HTML和CSS，創建適應視口尺寸的粘性側邊欄非常簡單。利用position: sticky並設置定向偏移（例如top: 0 ），可以輕鬆實現諸如跳轉菜單或截面標題之類的功能。有關更先進的粘性定位技術，請探索CSS-tricks之類的資源。

但是，在處理粘性元素內動態尺寸的內容時會出現挑戰。這可能導致內容隱藏在視口下方，這是當側欄的高度超過可用屏幕空間時的常見問題。

最近，我在設計帶有主內容區域的桌面佈局和一個包含動作項目和過濾器的側邊欄的桌面佈局時遇到了這個問題。側邊欄需要在滾動時固定在視口上。雖然最初的樣式很簡單，但側邊欄內容的可變高度帶來了挑戰。使用max-height和overflow-y: auto在較大的屏幕上運行良好，但是較小的視口會導致側邊欄溢出。

解決動態高度問題

我的初始方法考慮使用媒體查詢去除較小屏幕上的粘性定位，從而使側邊欄相對於其容器。但是，側邊欄的動態高度使得不可能找到適合媒體查詢的斷點。基於視口尺寸的動態調整高度的JavaScript解決方案似乎過於復雜，並且容易在窗口調整大小的問題上。

一個更優雅的基於CSS的解決方案被證明有效。

實施解決方案

主要元素利用Flexbox進行佈局，將固定的flex-basis分配給側邊欄以進行桌面寬度，並允許文章元素填充其餘空間。 Flexbox Holy Albatross技術可確保在沒有媒體查詢的情況下正確地堆放較小的視口。 align-self: start阻止其高度延伸，並通過主要文章伸展。

粘性側邊欄的關鍵CSS：

 .sidebar {
   -  offset：var（ -  space）;
  / * ... */
  位置：粘性；
  頂部：var（ - 偏移）;
}

這建立了由CSS自定義屬性（ --offset ）控制的頂部偏移量的粘性行為。該變量被重複使用以保持一致的間距。

側欄組件的結構：

 。成分 {
  顯示：網格；
  網格板行：自動1FR自動；
}

.component .content {
  最大高點：500px;
  溢出Y：自動；
}

這使用CSS網格進行靈活的佈局。內容部分上的max-height可防止過度增長，並且overflow-y: auto在必要時可以滾動。至關重要的是，在側邊欄上下文中：

 .sidebar .component {
  Max-Height：calc（100VH-var（ -  offset） * 2）;
}

這是根據視口高和偏移動態計算max-height ，從而防止了溢出。

這種方法創建了一個響應式粘性側邊欄，可適應不同的視口尺寸。雖然適用於台式機，但對於較小的設備，例如“跳到側欄”按鈕或撥動切換以隱藏/顯示側邊欄，可能需要進一步的增強功能。用戶測試將指導進一步的迭代。

以上是帶有HTML和CSS的動態尺寸粘性側邊欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！