CSS 或表格“Dock 布局”非滚动标题的解决方案?
我有一个可变高度标题,它不会随其下面的内容一起滚动。内容将像常规网页一样运行,溢出=自动,受限于视口的大小。
我还没有找到一个无表格的 CSS 解决方案,并且使用表格溢出无法正常工作 - 底部表格行不受视口高度 - 标题高度的限制。
这似乎是一个相当简单且常见的问题。有人想出了可行的解决方案吗?我可以忽略 IE < 8、如果有帮助的话。
I have a variable height header that doesn't scroll with the content below it. The content will act like a regular web page, with overflow=auto, constrained to the size of the viewport.
I have yet to find a table-free CSS solution, and using tables overflow doesn't work correctly - the bottom table row is not constrained to the viewport height - header height.
This seems a rather simple and common problem. Has anyone come up with a working solution? I am able to ignore IE < 8, if that helps.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
由于您不支持 IE6,因此可以将标题设置为
position:fixed
以防止其随文档滚动。请注意,滚动条仍会延伸到标题的顶部,因此您应该在内容的顶部添加填充,以便当滚动到顶部时,它不会最终位于标题后面。
Since you're not supporting IE6, you can set the header to
position: fixed
to prevent it from scrolling with the document.Note that the scrollbar will still extend to the top of the header, so you should add padding to the top of your content so that when it's scrolled to the top, it doesn't end up behind the header.