• CSSHTML实现高度宽度自适应


    首先说明 auto 和 100%是不一样的,100%是根据元素的像素有关的,auto是自动的。
    举个例子:给box下添加一个div高度是100%,这时候div高度为box高度300px,
    这时候如果给这个div设置padding,那么这个div的高度等于box的高度+padding的像素之和。

    再说一个知识点:
    正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容撑开的高度宽度;
    设置绝对定位/固定定位/浮动会脱离文档流;
    脱离文档流下,块级元素的宽度是内容撑开的元素,高度还是内容撑开的高度;
    给内联元素设置绝对定位/固定定位/浮动,内联元素就会有块元素的特点。

    <div class="box">
      <div class="header"></div>
      <div class="content">
        <div class="left"></div>
        <div class="main"></div>
      </div>
    </div>

    第一种使用: auto;overflow: hidden

    <style>
      *{margin: 0;padding: 0;}
      .box{300px;height:300px;position: relative;margin: 20px auto;}
      .header{height: 100px; 100%;background: #FF0000;}
      .content{position: absolute;top:100px;bottom: 0;background: yellow;height: auto; 100%;}
      .left{float: left;height: 100%; 100px;background: aqua;}
      .main{background: green;overflow: hidden; auto;;height: 100%;}

    </style>

    二种使用: 100%;padding;box-sizing: border-box;

    <style>

      *{margin: 0;padding: 0;}

      .box{300px;height:300px;position: relative;margin: 20px auto;}
      .header{height: 100px; 100%;background: #FF0000;}
      .content{position: absolute;top:100px;bottom: 0;background: yellow;height: auto; 100%;}
      .left{float: left;height: 100%; 100px;background: aqua;}
      /* .main{background: green; auto;height: 100%;padding-left: 100px;} */
      /* 这种情况,宽度是auto就会自己适应 */
      .main{background: green; 100%;height: 100%;padding-left: 100px;box-sizing: border-box;}
      /* 这个时候width是100%,是相对于父元素的宽度,padding-left属性就会是宽度多出100px,这时候就需要设置box-sizing: border-box;的作用是把padding往里加,不会改变宽度. */

    </style>

  • 相关阅读:
    【转载】SAP_ECC6.0_EHP4或SAP_ECC6.0_EHP5_基于Windows_Server_2008R2_和SQL_server_2008下的安装
    使用delphi 开发多层应用(二十四)KbmMW 的消息方式和创建WIB节点
    使用delphi 开发多层应用(二十三)KbmMW 的WIB
    实现KbmMw web server 支持https
    KbmMW 服务器架构简介
    Devexpress VCL Build v2014 vol 14.1.1 beta发布
    使用delphi 开发多层应用(二十二)使用kbmMW 的认证管理器
    KbmMW 4.50.00 测试版发布
    Basic4android v3.80 beta 发布
    KbmMW 认证管理器说明(转载)
  • 原文地址:https://www.cnblogs.com/Isabella-CC/p/10085448.html
Copyright © 2020-2023  润新知