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

自适应其实就是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   2   3   4           5       6       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      37  38  39 
上边高度为PX的div

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

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112265