上下栏固定，中间滚动的HTML模板

最新推荐文章于 2021-08-04 00:17:07 发布

weixin_33881041

最新推荐文章于 2021-08-04 00:17:07 发布

阅读量271

点赞数

因为用position是脱离文档流的，所以在最上面嘛，

中间用overflow：auto就会出现滚动效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ac-globalnav {
            position: absolute;
             margin: 0;
             left: 0;
             top: 0;
             width: 100%;
             min-width: 1024px;
             height: 88px;
             max-height: 100px;
             background: #333;
             background: rgba(0,0,0,0.8);
             font-size: 17px;
             user-select: none;
         }
         #web_button {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0;
            width: 100%;
            min-width: 1024px;
            height: 44px;
            max-height: 100px;
            background: #333;
            background: rgba(0,0,0,0.8);
            font-size: 17px;
            user-select: none;
            line-height:44px;

         }

        li {
              display: inline;
              list-style:none;
              margin:0 35px 0 35px;
              color: #fff;
              line-height:58px;
              cursor:pointer;

        }

        li:hover{
            color: red;
            <!--想换加入背景色的话， 可以使用background-->
        }
        ul {float:left; margin-left:18%;}

    .content{
        position: fixed;
        left: 0;
        right: 0;
        padding: 0;
        margin: 0;
        top: 88px;
        bottom: 44px;
        overflow: auto;
        background: red;
    }
    </style>
</head>
<body>
<!--top-->
<div>
    <div id="ac-globalnav">
        <ul>
            <li>首页</li>
            <li>自学教程</li>
            <li>指法表</li>
            <li>曲谱</li>
            <li>视频作品</li>
            <li>资料下载</li>
            <li>社区</li>
            <li>搜索</li>

            <li></li>
        </ul>
    </div>

</div>

<!--body-->
<div class="content">
    <div style="height: 2000px;">
    <h3>adf</h3>
    <h3>adf</h3>
    <h3>adf</h3>
    <h3>adf</h3>
    <h3>adf</h3>
    <h3>adf</h3>
    <h3>adf</h3>
    </div>
</div>

<!--button-->
<div>
        <div id = "web_button">
            <center>所有权...</center>
        </div>

</div>

</body>
</html>

weixin_33881041

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上下栏固定，中间滚动的HTML模板

因为用position是脱离文档流的，所以在最上面嘛，中间用overflow：auto就会出现滚动效果代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&amp
复制链接

扫一扫