当前位置 : 主页 > 网页制作 > css >

如何用display:flex 竖向分成3部分,头部和底部吸顶

来源:互联网 收集:自由互联 发布时间:2021-06-13
html head title放置文章标题/title meta http-equiv="Content-Type" content="text/html; charset=gb2312" / meta name="keywords" content="关键字" / meta name="description" content="本页描述或关键字描述" / /head style .abc{ pos

<html> <head> <title>放置文章标题</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="关键字" /> <meta name="description" content="本页描述或关键字描述" /> </head> <style> .abc{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction:column; background: orange; } .aaa{ width: 100%; height: 100px; background: red; } .bbb{ width: 100%; flex: 1; background: yellow; } .ccc{ width: 100%; height: 100px; background: green; }</style><body> <div class="abc"> <div class="aaa"></div> <div class="bbb"></div> <div class="ccc"></div></div></body> </html>

网友评论