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

本文转载自查看原文 2016-06-12 15:58 10457 css

设置父容器的宽度为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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 flex自适应高度内容高度超出容器高度自动出现滚动条的问题 vue页面高度填充，不出现滚动条 css 内容溢出显示垂直滚动条，内容不超出就不显示滚动条 overflow不超出时不显示滚动条属性解决内容未超出依然显示滚动条轨道的问题 ElementUI 表格表头筛选框的高度设置，超出一定高度，显示滚动条 DIV+CSS 样式之不出现横向滚动条，内容自动换行让超出div内容的显示滚动条：overflow:auto，以及overflow其它属性 css之超出部分不换行且显示横向滚动条 h5 解决横向滚动条内容显示不全与滚动条隐藏如果内容很长ueditor编辑辑器怎么出现滚动条