zoukankan      html  css  js  c++  java
  • css自适应

    //宽度

    <div style="border:1px solid red">
      <div style="float: left;background:#00f;100px;_margin-right:-3px">ggds</div>
      <div style="float: right;background:red;100px;_margin-left:-3px">ggds</div>
      <div style="margin:0 100px;background:#0f0">ggds</div>
    </div>

    //高度

    <div style="height:70px">ggds</div>
    <div style="border:1px solid red;position:absolute;top:70px;bottom:0;100%"></div>

    //IE6

    html{padding-top:70px}
    <div style="background:red;position:absolute;top:0;100%;height:70px">ggds</div>
    <div style="border:1px solid red;height:100%"></div>

    //最终

    html,body{ height:100%;}

    body,div{ margin:0; padding:0; color:#F00;}
    * html{ padding-top:100px;}/*for ie6*/
    .top{ background:#36C; height:100px;}
    * html .top{ background:#36C; height:100px; position:absolute; top:0; 100%;}/*for ie6*/
    .main{ background:#F90; position:absolute; 100%; top:100px; bottom:0; overflow:auto;}
    * html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
     
    <div class="top">ggds</div>
    <div class="main"></div>
     
    //等高布局

    .contain{
      margin:0 auto;
      600px;
      border:3px solid #00C;
      overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
    }
    .left{
      float:left;
      144px;
      background:#B0B0B0;
      padding-bottom:2000px;
      margin-bottom:-2000px;
    }
    .right{
      float:left;
      450px;
      background:#6CC;
      padding-bottom:2000px;
      margin-bottom:-2000px;
    }

    <div class="contain">
      <div class="left">我是left</div>
      <div class="right">我是right<br><br><br>现在我的高度比left高,但left用它的padding-bottom补偿了这部分高度</div>
      <div style="clear:both"></div>
    </div>

    相关文章:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html

        http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html

        http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html

  • 相关阅读:
    解决Excel vba case过程中遇到的代码难题
    Excel VBA——数据类型
    Outlook与Exchange的概念
    使用Aouth2进行身份验证
    OutLook开发人员文档学习
    SharePoint网站预热(Warm Up),提升响应速度
    SharePoint 2013下,使用ajax调用ashx报Http 302错误
    【SharePoint】图说搜索服务Search Service详细配置(一)
    NLog 日志框架搭建讲解(亲测有效,代码齐全)
    RabbitMQ 教程(四)RabbitMQ并发处理
  • 原文地址:https://www.cnblogs.com/ljbkyBlog/p/7097894.html
Copyright © 2011-2022 走看看