flex布局设置底部固定导航条

ゝ一世哀愁。 2022-05-09 08:38 446阅读 0赞

初步接触flex，话不多说，效果图如下:
在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.   .box{
  9.     display: flex;
  10.     flex-direction: column;
  11.     min-height: 100vh;/*100vh == height:100%,元素撑开与屏幕等高*/
  12.   }
  13.   .content{
  14.     flex: 1;
  15.   }
  16.   .footer{
  17.     width: 100%;
  18.     height: 50px;
  19.     border: 1px solid black;
  20.     display: flex;
  21.     flex-direction: row;
  22.     display: flex;
  23.   }
  24.   .nav{
  25.     flex:1;/*等分*/
  26.     border: 1px solid red;
  27.   }
  28. </style>
  29. <body>
  30. <div class="box">
  31.   <div class="content">index</div>
  32.   <div class="footer">
  33.     <div class="nav">第一</div>
  34.     <div class="nav">第二</div>
  35.     <div class="nav">第三</div>
  36.   </div>
  37. </div>
  38. </body>
  39. </html>

发表评论

表情：
评论列表 （有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读

    相关 flex布局二级导航栏

    欢迎访问我的博客地址 : [博客地址][Link 1] **Flex布局出现的意义：** 在我自己看来，flex布局的出现是为了让我们在处理一些较小且较为复杂的网...

    男娘i男娘i/ 0 赞/ 143 阅读

    相关 页面滚动条固定到最底部

    页面滚动条固定到最底部 项目中遇到的需求,具体可以用来实现 聊天室发送消息后使最后发的消息展示在页面上等, 方法亲测有效 1. 在想要定位的位置添加一个空的`div`

    Dear 丶Dear 丶/ 0 赞/ 225 阅读