欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

自己做简单自适应宽高 - gpfq

程序员文章站 2022-05-25 10:15:54
...
自适应其实就是width,height都随着变化,

但是如果(父级是px固定)兄弟标签是以px为单位,那么再设置div100%就肯定超出范围了(多了兄弟标签px长度),

  box-sizing方案

  1. 外层box-sizing: border-box; 同时设置padding: 100px 0 0
  2. 内层100像素高的元素向上移动100像素,或使用absolute定位防止占据空间;
  3. 另一个元素直接height: 100%;

    absolute positioning

    1. 外层position: relative
    2. 百分百自适应元素直接position: absolute; top: 100px; bottom: 0; left: 0

      我们以body为父级试试不同分辨率效果,我用的方法2,相对来说简单点
      自己做简单自适应宽高 - gpfq
       1 DOCTYPE html  >
       2 html  >
       3 head>
       4     title>   title>
       5     meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       6     style type="text/css">
       7         body,html{
       8             padding:0;
       9             margin:0;
      10             width:100%;
      11             height:100%;
      12             font-size:20px;
      13             text-align:center;
      14         }
      15          .brother{
      16              background-color:#f00;
      17              width:100%;
      18              height:70px;
      19              position:absolute;
      20          }
      21         .sister{
      22             background-color:#0f0;
      23             width:140px;
      24             position:absolute;
      25             top:70px;
      26             bottom:0;
      27         }
      28         .my{
      29             position:absolute;
      30             top:70px;/*top与上边对应-*/
      31             left:140px;/*left与左边对应-*/
      32             bottom:0;
      33             right:0;
      34             background-color:#00f;
      35         }
      36     style>
      37 head>
      38 body>
      39 div class="brother">上边高度为PX的divdiv>
      40 div class="sister">左边宽度PX的div(高度不要定义)div>
      41 div class="my">重点div!div>
      42 body>
      43 html> 
      View Code

      自己做简单自适应宽高 - gpfq


      初学者,见笑