web容器如何自适应视口大小

前言 在前端生涯上,经常会遇到需要容器自适应视口高度这种情况,本文将介绍我能想到的解决这个问题的方案。 基础知识 html元素的高度默认是auto(被内容自动撑开),宽度默认是100%(等于浏览器可视区域宽度),没有margin和padding; body元素的高度默认是auto,宽度默认是100%,有margin而没有padding; 若想让一个块元素(如div)的高度与屏幕高度自适应,始终充满屏幕,需要从html层开始层层添加height=100%,而又因为html,body元素的width默认就是100%,因此在里面的div 设定width=100%时就能和屏幕等宽。 方法一:继承父元素