css基础:底部固定,导航栏浮动在顶部

场景:底部浮动在底部,导致栏如果下面内容过长浮动在顶部,用到的是position:sticky

一、方法一

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .detail {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
    .header {
      background-color: pink;
      width: 100%;
      height: 200px;
      padding: 12px 24px;
      box-sizing: border-box;
    }
    .tabs {
      position: sticky;
      top: 0;
      height: 32px;
      line-height: 32px;
      background: yellow;
      border-radius: 8px;
      padding-left: 30px;
      display: flex;
      align-items: center;
      z-index: 9;
    }
    .tabContent {
      flex: 1;
      background: orange;
    }
    .box {
      height: 1000px;
      border: 2px solid red;
    }
    .footer {
      position: sticky;
      width: 100%;
      background: gray;
      padding: 16px;
      box-sizing: border-box;
      bottom: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
    }
  </style>
  <body>
    <div class="detail">
      <div class="header">头部</div>
      <div class="tabs">tabs内容</div>
      <div class="tabContent">
        <div class="box">这是里内容模块</div>
      </div>
      <div class="footer">底部</div>
    </div>
  </body>
</html>
相关推荐
IT_陈寒15 分钟前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码25 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation34 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛9 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼10 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔10 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗10 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥10 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js