自己做简单自适应宽高_html/css_WEB-ITnose
程序员文章站
2022-04-13 08:42:40
...
自适应其实就是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 37 38 39 上边高度为PX的div40左边宽度PX的div(高度不要定义)41重点div!42 43
初学者,见笑
推荐阅读
-
自己做简单自适应宽高 - gpfq
-
常见的两列、三列布局,宽高自适应_html/css_WEB-ITnose
-
自己做简单自适应宽高 - gpfq
-
移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )_html/css_WEB-ITnose
-
Iframe自适应高宽_html/css_WEB-ITnose
-
常见的两列、三列布局,宽高自适应_html/css_WEB-ITnose
-
Iframe自适应高宽_html/css_WEB-ITnose
-
自己做简单自适应宽高_html/css_WEB-ITnose
-
移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )_html/css_WEB-ITnose
-
自己做简单自适应宽高_html/css_WEB-ITnose