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>
相关推荐
loey_ln3 分钟前
webpack配置和打包性能优化
前端·webpack·性能优化
建群新人小猿4 分钟前
会员等级经验问题
android·开发语言·前端·javascript·php
爱上语文5 分钟前
HTML和CSS 表单、表格练习
前端·css·html
djk888815 分钟前
Layui Table 行号
前端·javascript·layui
小肚肚肚肚肚哦1 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk1 小时前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ1 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
zhangjr05753 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts