厦门维护网专业提供网站维护,网站修复,快速建站,公众号托管,小程序,,微信分销商城,网站推广优化等,服务热线:0592-6020133

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

发布:厦门维护网2017-12-24 7:45分类: HTML教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
 <title>div + css左右高度自适应测试</title>
  </head>
  <body>

       <style type="text/css">
         /*左右高度自适应 Start*/
    #Page
     {
          width: 960px;
          margin: auto;
         overflow: hidden;
     }
     #header
      {
          background: #000;
      }
      #PageLeft
      {
          width: 198px;
          float: left;
          text-align: left;
         border:solid 1px #ccc;
         background-color:#eee;
      }
      #PageRight
     {
         width: 748px;
          float: left;
          text-align: left;
          margin-left:10px;
          border:solid 1px #ccc;
     }
     /* easy clearing */
      #Page:after
      {
          content: '[DO NOT LEAVE IT IS NOT REAL]';
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }
     #Page
     {
          display: inline-block;
      }
      /*\*/
     #Page
     {
         display: block;
     }
     /* end easy clearing */
    /*\*/
    #PageLeft, #PageRight
    {
         padding-bottom: 32767px !important;
         margin-bottom: -32767px !important;
      }
      @media all and (min-width: 0px)
     {
          #PageLeft, #PageRight
        {
           padding-bottom: !important;
            margin-bottom: !important;
        }
         #PageLeft:before, #PageRight:before
        {
             content: '[DO NOT LEAVE IT IS NOT REAL]';
            display: block;
            background: inherit;
             padding-top: 32767px !important;
             margin-bottom: -32767px !important;
           height: 0;
       }
    }
    /*补充底部border*/
     div.BottomBorder{
        width: 960px;
        margin: auto;
          overflow: hidden;
        height:1px;
        clear:both;
   }
    div.BottomBorder .LeftBorder{
        width: 200px;
         float: left;        
        border-top:solid 1px #ccc;
    }
    div.BottomBorder .RightBorder{
        width: 750px;
        float: left;
        margin-left:10px;
        border-top:solid 1px #ccc;
    }
     /*左右高度自适应 End*/
    
 
 
  </style>


  <div id="Page">

      <div id="PageLeft">
          
         <p>test</p>
         <p>test</p>
      </div>


      <div id="PageRight">
          <p>test</p>
           <p>test</p>
           <p>test</p>
           <p>test</p>
          <p>test</p>
          <p>hi.baidu.com/</p>
         <p>test</p>
          <p>test</p>
          <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>
         <p>test</p>

     </div>



 </div>

</body>
</html>
温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 0/88 人参与

发表评论:

欢迎使用手机扫描访问本站,还可以关注微信哦~