CSS中height/width:100%与-webkit-fill-available的区别是什么？

-webkit-fill-available 是WebKit内核浏览器（Chrome、Safari、移动端WebView等）实现的CSS尺寸关键字，对应W3C标准的stretch属性，二者的差异主要体现在以下几点：

• 父元素高度依赖差异
  height: 100% 生效的前提是父元素存在非auto的明确高度值，如果父元素高度由内容撑开，height: 100% 会直接失效，元素高度最终由自身内容决定。
  height: -webkit-fill-available 不需要父元素有明确高度，会自动填充父元素的所有可用空间，父元素高度为auto时也能正常生效。
• 盒模型计算逻辑差异
  height: 100% 取的是父元素content区域高度的100%，默认标准盒模型下，如果子元素自身设置了padding、border，最终子元素的总高度会超出父容器，出现溢出问题。
  height: -webkit-fill-available 计算时会自动减去子元素自身的padding、border、margin值，最终元素总高度刚好填满父容器的可用空间，不会出现溢出。
• 特殊场景适配差异
  移动端全屏场景下，使用height: 100%需要同时给html、body标签都设置100%高度，且无法适配浏览器地址栏、底部操作栏收起展开的动态视口高度；height: -webkit-fill-available只需要给目标元素设置即可撑满视口，还能自动适配系统状态栏、浏览器导航栏占用的空间。
  在弹性布局、网格布局的子项、绝对定位元素中，-webkit-fill-available也能自动适配父容器剩余空间，不需要额外给父元素配置高度规则。

相关代码示例 #

/* 自动填充父元素可用高度，自动减去自身内边距、边框、外边距 */
.box1 {
  height: -webkit-fill-available;
}

/* 父元素无明确高度时失效，默认仅包含内容区高度 */
.box2 {
  height: 100%;
}

注意：-webkit-fill-available为WebKit内核专属属性，如需跨浏览器兼容可配合标准属性height: stretch使用。

内容的提问来源于stack exchange，提问作者Shahar Amir