特点是中间栏和父容器设置了最大和最小宽度，另外左右栏随屏幕固定，但其左和右属性继承父容器，上和下属性相对于浏览器显示区的上下。左栏设置超出高度时出现上下滚动条，宽度固定，不出现左右滚动条。

使用了一点jQuery，因为position:fixed会破坏父容器相对布局，虽然left可以继承，但right不能继承。

代码：

 
  
  1. <script language="javascript"> 
  2. $(document).ready(function(){ 
  3.     var rightFix = ($(window).width()-$("div#topic-c").width())/2; 
  4.     $("div#topic-right").css("right",rightFix+"px"); 
  5. }); 
  6. </script> 
 
  
 
 
  
 
  
  1. @charset "utf-8"; 
  2. /* CSS Document */ 
  3.  
  4. body{} 
  5.  
  6. #topic-c{ 
  7.     max-width:1500px; 
  8.     min-width:960px; 
  9.     margin:0 auto 20px auto; 
  10.     border:1px solid #33C; 
  11.     overflow:auto; 
  12. } 
  13.  
  14. #topic-left{ 
  15.     width:240px; 
  16.     float:left; 
  17.     border:1px solid red; 
  18.     position:fixed; 
  19.     top:0; 
  20.     left:inherit; 
  21.     bottom:20px; 
  22.     overflow:auto; 
  23. } 
  24.  
  25. #topic-left ul{list-style:none;margin:0;padding:0;} 
  26.  
  27. #topic-left ul li{ 
  28.     width:200px; 
  29.     word-wrap:break-word; 
  30.     display:block; 
  31.     border:1px solid #09C; 
  32.     margin:5px 0 0 10px; 
  33. } 
  34.  
  35. #topic-left a{ 
  36.     text-decoration:none; 
  37.     display:block; 
  38. } 
  39.  
  40. #topic-center{ 
  41.     max-width:960px; 
  42.     min-width:440px; 
  43.     border:1px solid #0F0; 
  44.     margin:0 250px; 
  45. } 
  46.  
  47. #topic-right{ 
  48.     width:240px; 
  49.     float:right; 
  50.     border:1px solid #00F; 
  51.     position:fixed; 
  52.     top:0; 
  53.     right:0; 
  54.     bottom:20px; 
  55. } 
  56.  
  57. #footer{margin-top:-20px;} 
 
  
 
 
  
 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>主题test</title> 
  6. <link href="style/topic.css" rel="stylesheet" type="text/css" /> 
  7. <script type="text/javascript" src="style/jquery-1.4.4.min.js"></script> 
  8. <script language="javascript"> 
  9. $(document).ready(function(){ 
  10.     var rightFix = ($(window).width()-$("div#topic-c").width())/2; 
  11.     $("div#topic-right").css("right",rightFix+"px"); 
  12. }); 
  13. </script> 
  14. <style type="text/css"> 
  15. body{width:auto;} 
  16. </style> 
  17. </head> 
  18.  
  19. <body> 
  20. <div id="topic-c"> 
  21. <div id="topic-left"> 
  22.     <p>左栏：目录<br /> 
  23.         随屏幕固定<br /> 
  24.         固定宽度 
  25.     </p> 
  26.     <ul> 
  27.       <li><a href="#">超长的标题里面含有deagdgrtryiskety令人崩溃了我想坑爹</a></li> 
  28.       <li>aaa</li> 
  29.       <li>aaa</li> 
  30.       <li>aaa</li> 
  31.       <li>aaa</li> 
  32.       <li>aaa</li> 
  33.       <li>aaa</li> 
  34.       <li>aaa</li> 
  35.       <li>aaa</li> 
  36.       <li>aaa</li> 
  37.       <li>aaa</li> 
  38.       <li>aaa</li> 
  39.       <li>aaa</li> 
  40.       <li>aaa</li> 
  41.       <li>aaa</li> 
  42.       <li>aaa</li> 
  43.       <li>aaa</li> 
  44.       <li>aaa</li> 
  45.       <li>aaa</li> 
  46.       <li>aaa</li> 
  47.       <li>aaa</li> 
  48.       <li>aaa</li> 
  49.       <li>aaa</li> 
  50.       <li>aaa</li> 
  51.       <li>aaa</li>     
  52.       <li>aaa</li> 
  53.       <li>aaa</li> 
  54.       <li>aaa</li> 
  55.       <li>aaa</li> 
  56.       <li>aaa</li> 
  57.       <li>aaa</li>     
  58.     </ul> 
  59.  
  60. </div> 
  61. <div id="topic-right"> 
  62.     <p>右栏：全站导航、widget<br /> 
  63.         随屏幕固定<br /> 
  64.         固定宽度 
  65.     </p> 
  66.  
  67. </div> 
  68. <div id="topic-center"> 
  69.     <p>中间栏：内容<br /> 
  70.         自适应宽度    
  71.     </p> 
  72.     <p>aaa</p> 
  73.     <p>aaa</p> 
  74.     <p>aaa</p> 
  75.     <p>aaa</p> 
  76.     <p>aaa</p> 
  77.     <p>aaa</p> 
  78.     <p>aaa</p> 
  79.     <p>aaa</p> 
  80.     <p>aaa</p> 
  81.     <p>aaa</p> 
  82.     <p>aaa</p> 
  83.     <p>aaa</p> 
  84.     <p>aaa</p> 
  85.     <p>aaa</p> 
  86.     <p>aaa</p> 
  87.     <p>aaa</p> 
  88.     <p>aaa</p> 
  89.     <p>aaa</p> 
  90.     <p>aaa</p> 
  91.     <p>aaa</p> 
  92.     <p>aaa</p> 
  93.     <p>aaa</p> 
  94.     <p>aaa</p> 
  95.     <p>aaa</p> 
  96.     <p>aaa</p> 
  97.     <p>aaa</p> 
  98.     <p>aaa</p> 
  99.     <p>aaa</p> 
  100. </div> 
  101. <div class="clear"></div> 
  102. </div> 
  103. <div id="footer"> 
  104. copyright 2013 pockry@<a href="http://idlelife.org" target="_blank">idlelife.org</a> All rights reserved.[powered] 
  105. </div> 
  106.  
  107. </body> 
  108. </html> 
 
  
源码见下。