带有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中文网其他相关文章！