CSS html固定向上和向下导航栏

顺晟科技

2021-09-21 11:39:56

260

有时候需要固定上下导航栏中间部分可以滑动这样的需求

以下是实现的具体方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>
</head>
<style>
    html,body{
        padding: 0;
        margin: 0;
        width: ;
        height: ;
        overflow-y: hidden;
    }
    .wrap{
        display: flex;
        flex-direction: column;
        height: ;
    }
    .header-nav{
        width: ;
        height: 60px;
        background: #000;
    }
    .content{
        flex: 1;
        height: 2000px;
        background: #E0FFFF;
        overflow-y: scroll;
    }
    .content p{
        margin: 100px;
    }
    .footer-nav{
        width: ;
        height: 200px;
        background: #000;
    }
</style>
<body>
<div class="wrap">
    <div class="header-nav"></div>
    <div class="content">
    <p>我是文字1</p>
    <p>我是文字2</p>
    <p>我是文字3</p>
    <p>我是文字4</p>
    <p>我是文字5</p>
    <p>我是文字6</p>
    <p>我是文字7</p>
    <p>我是文字8</p>
    <p>我是文字9</p>
    <p>我是文字10</p>
    <p>我是文字11</p>
    <p>我是文字12</p>
    <p>我是文字13</p>
    </div>
    <div class="footer-nav"></div>
</div>    
</body>
</html>

由于中间部分是一个适应性的盒子，如何想达到有滚动条的效果必须要盒子内的内容撑开盒子!

有不足的地方可以指出。

上一篇：Html报表用Excel打开保留表下一篇：HTML下拉导航菜单实现:CSS/J