纸上得来终觉浅，绝知此事要躬行。

 

CSS+DIV 实现左右高度自适应

 

  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      <title>div + css左右高度自适应测试</title>
  5  </head>
  6  <body>
  7      <div class="MainCenterDiv">
  8      <style type="text/css">
  9        /*左右高度自适应 Start*/
 10     #Page
 11      {
 12           width: 960px;
 13           margin: 0 auto;
 14          overflow: hidden;
 15       }
 16       #header
 17       {
 18           background: #000;
 19       }
 20       #PageLeft
 21       {
 22           width: 198px;
 23           float: left;
 24           text-align: left;
 25           border:solid 1px #ccc;
 26           background-color:#eee;
 27       }
 28       #PageRight
 29      {
 30          width: 748px;
 31           float: left;
 32           text-align: left;
 33           margin-left:10px;
 34           border:solid 1px #ccc;
 35       }
 36       /* easy clearing */
 37       #Page:after
 38       {
 39           content: '[DO NOT LEAVE IT IS NOT REAL]';
 40           display: block;
 41           height: 0;
 42           clear: both;
 43           visibility: hidden;
 44       }
 45       #Page
 46       {
 47           display: inline-block;
 48       }
 49       /*\*/
 50       #Page
 51       {
 52           display: block;
 53       }
 54       /* end easy clearing */
 55       /*\*/
 56       #PageLeft, #PageRight
 57      {
 58           padding-bottom: 32767px !important;
 59           margin-bottom: -32767px !important;
 60       }
 61       @media all and (min-width: 0px)
 62      {
 63           #PageLeft, #PageRight
 64         {
 65              padding-bottom: 0 !important;
 66              margin-bottom: 0 !important;
 67         }
 68          #PageLeft:before, #PageRight:before
 69         {
 70              content: '[DO NOT LEAVE IT IS NOT REAL]';
 71             display: block;
 72             background: inherit;
 73              padding-top: 32767px !important;
 74              margin-bottom: -32767px !important;
 75             height: 0;
 76         }
 77     }
 78     /*补充底部border*/
 79      div.BottomBorder{
 80         width: 960px;
 81         margin: 0 auto;
 82           overflow: hidden;
 83         height:1px;
 84         clear:both;
 85     }
 86      div.BottomBorder .LeftBorder{
 87         width: 200px;
 88          float: left;        
 89         border-top:solid 1px #ccc;
 90     }
 91     div.BottomBorder .RightBorder{
 92         width: 750px;
 93         float: left;
 94         margin-left:10px;
 95          border-top:solid 1px #ccc;
 96      }
 97      /*左右高度自适应 End*/
 98     
 99 
100    
101     </style>
102     <div id="Page">
103         <div id="PageLeft">
104             
105             <p>test</p>
106             <p>test</p>
107         </div>
108         <div id="PageRight">
109             <p>test</p>
110              <p>test</p>
111              <p>test</p>
112              <p>test</p>
113             <p>test</p>
114             <p>hi.baidu.com/</p>
115             <p>test</p>
116              <p>test</p>
117             <p>test</p>
118            <p>test</p>
119            <p>test</p>
120 
121        </div>
122         <div class="BottomBorder">
123             <div class="LeftBorder"></div>
124             <div class="RightBorder"></div>
125          </div>
126     </div>
127     </div>
128  </body>
129  </html>

 

 

 

css + div 实现左右div区域高度自动适应

引自：http://www.cnblogs.com/guolichun/archive/2008/04/25/1171179.html

posted on 2010-08-24 19:56  JRoger  阅读(3651)  评论(0)  编辑  收藏  举报

导航