让超出容器高度的内容滚动显示但不出现滚动条

最新推荐文章于 2023-04-26 17:05:49 发布

weixin_30466953

最新推荐文章于 2023-04-26 17:05:49 发布

阅读量1.9k

点赞数 2

文章标签： javascript 移动开发 c# ViewUI

原文链接：http://www.cnblogs.com/pcd12321/p/5577847.html

版权

本文介绍了一种通过CSS设置父容器与子容器宽度的方法，实现子容器在达到父容器边界时显示垂直滚动条，同时隐藏超出部分的滚动条宽度。通过具体的HTML和CSS代码示例展示了如何设置容器的宽度、高度及溢出属性。

摘要由CSDN通过智能技术生成

设置父容器的宽度为280px，设置子容器的宽度为300px，其中的20px作为滚动条的宽度，父容器设置overflow: hidden;则不会显示出超出容器的20px的滚动条，子容器设置

overflow-y: auto;overflow-x: hidden;使其出现垂直滚动条。示例代码如下：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    html, body{
        width: 100%;
        height: 100%;
    }
    #div1{
        width: 280px;
        height: 500px;
        border: 1px solid;
        overflow: hidden;
    }
    ul {
        width: 300px;
        overflow-y: auto;
        overflow-x: hidden; 
        height: 500px;
    }
    </style>
</head>
<body>
    <div id="div1">
        <ul>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
            <li>dsdsd</li>
        </ul>
    </div>
</body>
</html>