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

自己做简单自适应宽高_html/css_WEB-ITnose

程序员文章站 2022-04-13 08:42:40
...
自适应其实就是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,相对来说简单点

       1  2  3       4      5 6     37 38 39 
      上边高度为PX的div
      40
      左边宽度PX的div(高度不要定义)
      41
      重点div!
      42 43


      初学者,见笑