Articles on Smashing Magazine — For Web Designers And Developers
·
粘性头部和全高元素：一个棘手的组合
💡
原文英文，约1800词，阅读约需7分钟。
📝
内容提要
本文讨论了CSS中粘性定位和全高元素的组合问题，并提出了使用display: grid属性来解决的方法。通过在网格容器中添加占位元素，实现头部固定高度，主体元素自适应剩余可见空间。该方法适用于大多数情况，并在现代浏览器中得到良好支持。
🎯
关键要点
- 粘性定位在CSS中较为复杂，尤其是与其他元素组合时。
- 粘性元素在与其他元素协调时，可能无法正常工作，特别是在需要组合高度的情况下。
- 使用Flexbox将头部和主体元素放入一个父容器并设置为100vh并不奏效，因为粘性头部会被限制在父容器内。
- 固定高度的解决方案虽然可行，但可能导致维护困难，因为需要不断调整高度以适应不同屏幕尺寸和内容变化。
- 使用display: grid属性可以有效解决粘性头部和全高元素的问题。
- 通过添加一个占位元素并设置为100vh，可以让头部和主体元素自适应剩余空间。
- HTML元素的顺序很重要，确保占位元素在头部和主体元素之前定义。
- 这种CSS Grid方法适用于大多数情况，并且在现代浏览器中得到良好支持。
🏷️
标签
➡️
