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

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

代码：

   
   
   
   
    
    
    
    
    
  1. "javascript"> 
    2. 
    
    
    
    
  2. $(document).ready(function(){ 
    3. 
    
    
    
    
  3.     var rightFix = ($(window).width()-$("div#topic-c").width())/2; 
    4. 
    
    
    
    
  4.     $("div#topic-right").css("right",rightFix+"px"); 
    5. 
    
    
    
    
  5. }); 
    6. 
    
    
    
    
  6.  
    7.

 

   
   
   
   
    
    
    
    
    
  1. @charset "utf-8"; 
    2. 
    
    
    
    
  2. /* CSS Document */ 
    3. 
    
    
    
    
  3.  
    4. 
    
    
    
    
  4. body{} 
    5. 
    
    
    
    
  5.  
    6. 
    
    
    
    
  6. #topic-c{ 
    7. 
    
    
    
    
  7.     max-width:1500px; 
    8. 
    
    
    
    
  8.     min-width:960px; 
    9. 
    
    
    
    
  9.     margin:0 auto 20px auto; 
    10. 
    
    
    
    
  10.     border:1px solid #33C; 
    11. 
    
    
    
    
  11.     overflow:auto; 
    12. 
    
    
    
    
  12. } 
    13. 
    
    
    
    
  13.  
    14. 
    
    
    
    
  14. #topic-left{ 
    15. 
    
    
    
    
  15.     width:240px; 
    16. 
    
    
    
    
  16.     float:left; 
    17. 
    
    
    
    
  17.     border:1px solid red; 
    18. 
    
    
    
    
  18.     position:fixed; 
    19. 
    
    
    
    
  19.     top:0; 
    20. 
    
    
    
    
  20.     left:inherit; 
    21. 
    
    
    
    
  21.     bottom:20px; 
    22. 
    
    
    
    
  22.     overflow:auto; 
    23. 
    
    
    
    
  23. } 
    24. 
    
    
    
    
  24.  
    25. 
    
    
    
    
  25. #topic-left ul{list-style:none;margin:0;padding:0;} 
    26. 
    
    
    
    
  26.  
    27. 
    
    
    
    
  27. #topic-left ul li{ 
    28. 
    
    
    
    
  28.     width:200px; 
    29. 
    
    
    
    
  29.     word-wrap:break-word; 
    30. 
    
    
    
    
  30.     display:block; 
    31. 
    
    
    
    
  31.     border:1px solid #09C; 
    32. 
    
    
    
    
  32.     margin:5px 0 0 10px; 
    33. 
    
    
    
    
  33. } 
    34. 
    
    
    
    
  34.  
    35. 
    
    
    
    
  35. #topic-left a{ 
    36. 
    
    
    
    
  36.     text-decoration:none; 
    37. 
    
    
    
    
  37.     display:block; 
    38. 
    
    
    
    
  38. } 
    39. 
    
    
    
    
  39.  
    40. 
    
    
    
    
  40. #topic-center{ 
    41. 
    
    
    
    
  41.     max-width:960px; 
    42. 
    
    
    
    
  42.     min-width:440px; 
    43. 
    
    
    
    
  43.     border:1px solid #0F0; 
    44. 
    
    
    
    
  44.     margin:0 250px; 
    45. 
    
    
    
    
  45. } 
    46. 
    
    
    
    
  46.  
    47. 
    
    
    
    
  47. #topic-right{ 
    48. 
    
    
    
    
  48.     width:240px; 
    49. 
    
    
    
    
  49.     float:right; 
    50. 
    
    
    
    
  50.     border:1px solid #00F; 
    51. 
    
    
    
    
  51.     position:fixed; 
    52. 
    
    
    
    
  52.     top:0; 
    53. 
    
    
    
    
  53.     right:0; 
    54. 
    
    
    
    
  54.     bottom:20px; 
    55. 
    
    
    
    
  55. } 
    56. 
    
    
    
    
  56.  
    57. 
    
    
    
    
  57. #footer{margin-top:-20px;} 
    58.

 

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
    
    
    
    
  5. <title>主题testtitle> 
    6. 
    
    
    
    
  6. <link href="style/topic.css" rel="stylesheet" type="text/css" /> 
    7. 
    
    
    
    
  7. <script type="text/javascript" src="style/jquery-1.4.4.min.js">script> 
    8. 
    
    
    
    
  8. <script language="javascript"> 
    9. 
    
    
    
    
  9. $(document).ready(function(){ 
    10. 
    
    
    
    
  10.     var rightFix = ($(window).width()-$("div#topic-c").width())/2; 
    11. 
    
    
    
    
  11.     $("div#topic-right").css("right",rightFix+"px"); 
    12. 
    
    
    
    
  12. }); 
    13. 
    
    
    
    
  13. script> 
    14. 
    
    
    
    
  14. <style type="text/css"> 
    15. 
    
    
    
    
  15. body{width:auto;} 
    16. 
    
    
    
    
  16. style> 
    17. 
    
    
    
    
  17. head> 
    18. 
    
    
    
    
  18.  
    19. 
    
    
    
    
  19. <body> 
    20. 
    
    
    
    
  20. <div id="topic-c"> 
    21. 
    
    
    
    
  21. <div id="topic-left"> 
    22. 
    
    
    
    
  22.     <p>左栏：目录<br /> 
    23. 
    
    
    
    
  23.         随屏幕固定<br /> 
    24. 
    
    
    
    
  24.         固定宽度 
    25. 
    
    
    
    
  25.     p> 
    26. 
    
    
    
    
  26.     <ul> 
    27. 
    
    
    
    
  27.       <li><a href="#">超长的标题里面含有deagdgrtryiskety令人崩溃了我想坑爹a>li> 
    28. 
    
    
    
    
  28.       <li>aaali> 
    29. 
    
    
    
    
  29.       <li>aaali> 
    30. 
    
    
    
    
  30.       <li>aaali> 
    31. 
    
    
    
    
  31.       <li>aaali> 
    32. 
    
    
    
    
  32.       <li>aaali> 
    33. 
    
    
    
    
  33.       <li>aaali> 
    34. 
    
    
    
    
  34.       <li>aaali> 
    35. 
    
    
    
    
  35.       <li>aaali> 
    36. 
    
    
    
    
  36.       <li>aaali> 
    37. 
    
    
    
    
  37.       <li>aaali> 
    38. 
    
    
    
    
  38.       <li>aaali> 
    39. 
    
    
    
    
  39.       <li>aaali> 
    40. 
    
    
    
    
  40.       <li>aaali> 
    41. 
    
    
    
    
  41.       <li>aaali> 
    42. 
    
    
    
    
  42.       <li>aaali> 
    43. 
    
    
    
    
  43.       <li>aaali> 
    44. 
    
    
    
    
  44.       <li>aaali> 
    45. 
    
    
    
    
  45.       <li>aaali> 
    46. 
    
    
    
    
  46.       <li>aaali> 
    47. 
    
    
    
    
  47.       <li>aaali> 
    48. 
    
    
    
    
  48.       <li>aaali> 
    49. 
    
    
    
    
  49.       <li>aaali> 
    50. 
    
    
    
    
  50.       <li>aaali> 
    51. 
    
    
    
    
  51.       <li>aaali>     
    52. 
    
    
    
    
  52.       <li>aaali> 
    53. 
    
    
    
    
  53.       <li>aaali> 
    54. 
    
    
    
    
  54.       <li>aaali> 
    55. 
    
    
    
    
  55.       <li>aaali> 
    56. 
    
    
    
    
  56.       <li>aaali> 
    57. 
    
    
    
    
  57.       <li>aaali>     
    58. 
    
    
    
    
  58.     ul> 
    59. 
    
    
    
    
  59.  
    60. 
    
    
    
    
  60. div> 
    61. 
    
    
    
    
  61. <div id="topic-right"> 
    62. 
    
    
    
    
  62.     <p>右栏：全站导航、widget<br /> 
    63. 
    
    
    
    
  63.         随屏幕固定<br /> 
    64. 
    
    
    
    
  64.         固定宽度 
    65. 
    
    
    
    
  65.     p> 
    66. 
    
    
    
    
  66.  
    67. 
    
    
    
    
  67. div> 
    68. 
    
    
    
    
  68. <div id="topic-center"> 
    69. 
    
    
    
    
  69.     <p>中间栏：内容<br /> 
    70. 
    
    
    
    
  70.         自适应宽度    
    71. 
    
    
    
    
  71.     p> 
    72. 
    
    
    
    
  72.     <p>aaap> 
    73. 
    
    
    
    
  73.     <p>aaap> 
    74. 
    
    
    
    
  74.     <p>aaap> 
    75. 
    
    
    
    
  75.     <p>aaap> 
    76. 
    
    
    
    
  76.     <p>aaap> 
    77. 
    
    
    
    
  77.     <p>aaap> 
    78. 
    
    
    
    
  78.     <p>aaap> 
    79. 
    
    
    
    
  79.     <p>aaap> 
    80. 
    
    
    
    
  80.     <p>aaap> 
    81. 
    
    
    
    
  81.     <p>aaap> 
    82. 
    
    
    
    
  82.     <p>aaap> 
    83. 
    
    
    
    
  83.     <p>aaap> 
    84. 
    
    
    
    
  84.     <p>aaap> 
    85. 
    
    
    
    
  85.     <p>aaap> 
    86. 
    
    
    
    
  86.     <p>aaap> 
    87. 
    
    
    
    
  87.     <p>aaap> 
    88. 
    
    
    
    
  88.     <p>aaap> 
    89. 
    
    
    
    
  89.     <p>aaap> 
    90. 
    
    
    
    
  90.     <p>aaap> 
    91. 
    
    
    
    
  91.     <p>aaap> 
    92. 
    
    
    
    
  92.     <p>aaap> 
    93. 
    
    
    
    
  93.     <p>aaap> 
    94. 
    
    
    
    
  94.     <p>aaap> 
    95. 
    
    
    
    
  95.     <p>aaap> 
    96. 
    
    
    
    
  96.     <p>aaap> 
    97. 
    
    
    
    
  97.     <p>aaap> 
    98. 
    
    
    
    
  98.     <p>aaap> 
    99. 
    
    
    
    
  99.     <p>aaap> 
    100. 
    
    
    
    
  100. div> 
    101. 
    
    
    
    
  101. <div class="clear">div> 
    102. 
    
    
    
    
  102. div> 
    103. 
    
    
    
    
  103. <div id="footer"> 
    104. 
    
    
    
    
  104. copyright 2013 pockry@<a href="http://idlelife.org" target="_blank">idlelife.orga> All rights reserved.[powered] 
    105. 
    
    
    
    
  105. div> 
    106. 
    
    
    
    
  106.  
    107. 
    
    
    
    
  107. body> 
    108. 
    
    
    
    
  108. html> 
    109.

源码见下。