[{"data":1,"prerenderedAt":101},["ShallowReactive",2],{"content:\u002F2023\u002Fcss\u002Fwebkit-fill-available":3,"surround:\u002F2023\u002Fcss\u002Fwebkit-fill-available":90},{"id":4,"title":5,"body":6,"categories":67,"date":70,"description":71,"draft":72,"extension":73,"image":74,"meta":75,"navigation":77,"path":78,"permalink":74,"published":74,"readingTime":79,"recommend":74,"references":74,"seo":84,"sitemap":85,"stem":86,"tags":87,"type":88,"updated":74,"__hash__":89},"content\u002Fposts\u002F2023\u002Fcss\u002Fwebkit-fill-available.md","-webkit-fill-available 关键字",{"type":7,"value":8,"toc":64},"minimark",[9,17,23,30,40,46,49,55],[10,11,12,16],"p",{},[13,14,15],"code",{"code":15},"-webkit-"," 前缀：浏览器厂商会在 CSS 属性或值前加一个私有的前缀来支持新属性，带有此前缀的属性或值能够在以 WebKit 为内核的浏览器中正常使用。以 WebKit 为内核的浏览器代表有 Safari 和 Chrome。",[10,18,19,22],{},[13,20,21],{"code":21},"fill-available","：它会自动计算元素的宽度和高度，使元素的尺寸撑满其父元素的可用空间，这个属性通常用于解决某些布局问题。",[10,24,25,26,29],{},"下面是一个使用 ",[13,27,28],{"code":28},"-webkit-fill-available"," 来实现元素填充父元素的剩余空间的例子：",[31,32,38],"pre",{"className":33,"code":35,"language":36,"meta":37},[34],"language-css",".parent {\n  width: 300px;\n  height: 200px;\n  border: 1px solid #ccc;\n  display: flex;\n}\n\n.child {\n  width: -webkit-fill-available;\n  height: -webkit-fill-available;\n  background-color: #f0f0f0;\n}\n","css","",[13,39,35],{"__ignoreMap":37},[10,41,42,43,45],{},"需要注意的是，",[13,44,28],{"code":28}," 是一个非标准的属性，一般情况下不建议使用非标准的或私有的 CSS 属性值，因为它们可能不被不同浏览器所支持，导致兼容性问题。",[10,47,48],{},"可以考虑其他方案的实现:",[31,50,53],{"className":51,"code":52,"language":36,"meta":37},[34],".parent {\n  display: flex;\n}\n\n.child {\n  flex: 1;\n}\n",[13,54,52],{"__ignoreMap":37},[10,56,57],{},[58,59,63],"a",{"href":60,"rel":61},"https:\u002F\u002Fjsbin.com\u002Froyugijeno\u002Fedit?html,css,output",[62],"nofollow","查看效果",{"title":37,"searchDepth":65,"depth":65,"links":66},4,[],[68,69],"学习笔记","CSS","2023-07-06","-webkit- 前缀：浏览器厂商会在 CSS 属性或值前加一个私有的前缀来支持新属性，带有此前缀的属性或值能够在以 WebKit 为内核的浏览器中正常使用。以 WebKit 为内核的浏览器代表有 Safari 和 Chrome。",false,"md",null,{"comments":72,"slots":76},{},true,"\u002F2023\u002Fcss\u002Fwebkit-fill-available",{"text":80,"minutes":81,"time":82,"words":83},"2 min read",1.25,75000,250,{"title":5,"description":71},{"loc":78},"posts\u002F2023\u002Fcss\u002Fwebkit-fill-available",[15,21],"tech","rnNxM4uQEO5NmsffJK6i9TqtvJ1fQm8YpaBTKE6A_hM",[91,96],{"title":92,"path":93,"stem":94,"date":95,"type":88,"children":-1},"CSS 垂直居中的几种方式","\u002F2023\u002Fcss\u002Fvertical-centering-method","posts\u002F2023\u002Fcss\u002Fvertical-centering-method","2023-06-27",{"title":97,"path":98,"stem":99,"date":100,"type":88,"children":-1},"CSS命名规范-BEM（转载）","\u002F2023\u002Fcss\u002Fbemcss","posts\u002F2023\u002Fcss\u002Fbemcss","2023-07-07",1793699837886]