当前位置：首页 > news >正文

css基础：底部固定，导航栏浮动在顶部

news 2024/11/8 10:31:17

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

一、方法一

<!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>

查看全文

http://www.mrgr.cn/news/68242.html