我有一个固定的标题元素,我想保持固定滚动。然而,可滚动区域,我希望它定位在固定元素之后,但我不想使用position: absolute
并将其从文档流中删除。
我已经创建了一个Codepen here来说明我遇到的问题。我希望红色元素(.top)坚持滚动,而不隐藏第一个列表项。
有没有办法在CSS(可能使用flexbox)中执行此操作,而且不需要任何JS?
感谢任何帮助。
提前致谢!
答案 0 :(得分:1)
如果我对您的问题的理解是正确的,您希望不对进行更改,除了,可滚动内容不会隐藏在固定标题后面。
固定标题的自然高度似乎接近20px。
因此,您可以对可滚动内容应用上边距,将其从顶部向下推,直到它清除标题。
尝试将此添加到您的CSS:
div.list { margin-top: 20px;}
这将从顶部推送包含所有列表项20px的div
。
DEMO:http://codepen.io/anon/pen/EVWYJd
更新
当已知固定标题的高度时,上述答案有效。但根据评论中的反馈,标题的高度会有所不同。因此,无论标题的高度如何,都需要一种解决方案,使可滚动内容保持在标题下方。
这些帖子已经解决了这个问题: