父级div固定高度并设置超出隐藏，子级div内容超出隐藏可以垂直滚动的设置

最新推荐文章于 2025-10-10 15:18:08 发布

原创最新推荐文章于 2025-10-10 15:18:08 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种利用CSS实现的滚动条隐藏技巧，通过设置父元素的overflow属性为hidden，可以裁剪掉子容器的滚动条，同时保留纵向滚动功能，并使超出内容保持美观。子元素设置合适的宽度和高度，配合使用overflow-y:auto，实现既无滚动条又能滚动的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Title</title>
    <style>
        .box{
            width:  500px;
            height: 400px;;
            border: 1px solid #000;
            overflow-x: hidden;
            /*overflow-y: auto;*/
            /*overflow: auto;*/
        }
        .box-in{
            width: 300px;
            height: 1500px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-in">
            <div class="in">
                原理：
                 1.父元素设置overflow: hidden; 
                 目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。
                             2）子容器里面具体内容高度超出部分裁剪掉，美观?。
                 2.子元素设置宽度大于父元素宽度，超出的滚动条会被裁剪掉；
                     设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条，但是可以滚动。

                原理：
                 1.父元素设置overflow: hidden; 
                 目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。
                             2）子容器里面具体内容高度超出部分裁剪掉，美观?。
                 2.子元素设置宽度大于父元素宽度，超出的滚动条会被裁剪掉；
                     设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条，但是可以滚动。
                 3.具体的内容设置高度大于父元素高度，实现没有滚动条出现内容可滚动效果
                原理：
                 1.父元素设置overflow: hidden; 
                 目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。
                             2）子容器里面具体内容高度超出部分裁剪掉，美观?。
                 2.子元素设置宽度大于父元素宽度，超出的滚动条会被裁剪掉；
                     设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条，但是可以滚动。

                原理：
                 1.父元素设置overflow: hidden; 
                 目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。高度，实现没有滚动条出现内容可滚动效果
            </div>
        </div>
    </div>
    <div>
        ok???
    </div>
</body>

<script>

</script>
</html>