flex容器属性和项目属性的实际应用_高度补全
Posted 最爱小虾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex容器属性和项目属性的实际应用_高度补全相关的知识，希望对你有一定的参考价值。
一个高度为100px， 另外一个高度自动补全当前界面下剩余的高度：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body,.box{ height:100%; } body{ margin:0; } .box{ display:-webkit-flex; -webkit-flex-direction: column; display:flex; flex-direction:column; } .box .child{ height:40px; background:#f00; } .box .child1{ flex:1; background:#0f0 } </style> </head> <body> <div class="box"> <div class="child">child</div> <div class="child1">child1</div> </div> </body> </html>
以上是关于flex容器属性和项目属性的实际应用_高度补全的主要内容，如果未能解决你的问题，请参考以下文章