移动端右侧滚动条压在footer/top之上怎么办？

男娘i 2022-11-29 03:09 119阅读 0赞

未成功的效果：(滚动条压在了顶部和底部上面)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center]  
成功的效果：顶部和底部压在滚动条上面了OK  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center 1]  
总结：使用 calc(100vh - 160px); 减去 顶部和底部高度之和 就很好的解决的这个滚动条压在顶部/底部的问题。

上才艺：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            .box { 
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                overflow: hidden;
            }
            
            .top,
            .footer { 
                width: 100%;
                height: 80px;
                background-color: skyblue;
                position: fixed;
                text-align: center;
            }
            
            .footer { 
                bottom: 0;
            }
            
            li { 
                height: 150px;
                border: 1px solid red;
                text-align: center;
            }
            
            ul { 
                margin-top: 80px;
                /* ul高度减去 顶部和底部高度之和 */
                height: calc(100vh - 160px);
                overflow: hidden;
                overflow-y: auto;
            }
        </style>
    </head>
    
    <body>
    
        <div class="box">
            <div class="top">顶部要压在滚动条之上</div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
            </ul>
            <div class="footer">底部要压在滚动条之上</div>
        </div>
        <script>
        </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/ab7dc316adf74d83b1043e4ac5314ba2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/95d5c346bc87441b9a061fd473f1e8c4.png