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

自适应其实就是width，height都随着变化，

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

　　box-sizing方案

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

absolute positioning

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

我们以body为父级试试不同分辨率效果,我用的方法2,相对来说简单点

  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的div   div  > 
 40     div   class  ="sister"  > 左边宽度PX的div(高度不要定义)   div  > 
 41     div   class  ="my"  > 重点div!   div  > 
 42     body  > 
 43     html  >   

查看更多关于自己做简单自适应宽高-gpfq的详细内容...