css – 静态标题菜单,可滚动体

前端之家收集整理的这篇文章主要介绍了css – 静态标题菜单,可滚动体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这正是我要完成的:
  1. +--------screen-----------------------+
  2. | ______________________ |*|
  3. | |_static_header______| |*|
  4. | | | | |*|
  5. | | content |menu | |*|
  6. | | scrollable |static| |*|
  7. | | | | |*|
  8. | | | | |*|
  9. | | | | |*|
  10. +-------------------------------------+

内容的高度可变,内容滚动条必须显示页面正文中(而不是在其上).
我设法得到了基本的想法,但是当滚动条显示时,我无法将内容div置于正确的位置,即使我设置为始终显示滚动条,我也不能使用固定宽度,因为它们不同从浏览器到浏览器.

  1. <div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
  2. <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
  3. Header
  4. </div>
  5. </div>
  6.  
  7. <!-- Fixed div acting as the body "page" so the scrollbar shows as the page's -->
  8. <div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
  9. <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
  10. <div style="background-color:Orange; width:100%; height:900px;">
  11. Content
  12. </div>
  13. </div>
  14. </div>
  15.  
  16. <div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
  17. <div style="width:500px; float:left;">
  18. <div style="background-color:Green; float:right; width:200px; ">
  19. Menu
  20. </div>
  21. </div>
  22. </div>

在上面的代码中,内容由滚动条宽度关闭,如何在页面的其余部分获得正确的权限(即,即使它有一个也可以计算它的位置,而不考虑滚动条的宽度)?

解决方法

如果我明白你的问题,这将是一个解决方案: http://jsfiddle.net/7pJS8/

猜你在找的CSS相关文章