css+html固定上下导航栏

__天眼__ 2019-09-20

展开全文

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

以下是实现的具体方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>
</head>
<style>
    html,body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow-y: hidden;
    }
    .wrap{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .header-nav{
        width: 100%;
        height: 60px;
        background: #000;
    }
    .content{
        flex: 1;
        height: 2000px;
        background: #E0FFFF;
        overflow-y: scroll;
    }
    .content p{
        margin: 100px;
    }
    .footer-nav{
        width: 100%;
        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>