CSS+DIV 实现左右高度自适应_html/css_WEB-ITnose

 

                  <p class="sycode">                       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     >                  </p>

 

 

 

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

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