讓超出容器高度的內容滾動顯示但不出現滾動條

本文轉載自查看原文 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自適應高度內容高度超出容器高度自動出現滾動條的問題 css 始終顯示滾動條，內容超出顯示有滑塊的滾動條，內容沒有超出顯示空的滾動條 tbody設置超出固定的高度出現滾動條，沒超出不顯示。 vue頁面高度填充，不出現滾動條 textarea高度隨文本內容變化，且不出現滾動條 css 內容溢出顯示垂直滾動條，內容不超出就不顯示滾動條 css——內容溢出顯示垂直滾動條，內容不超出就不顯示滾動條 css——內容溢出顯示垂直滾動條，內容不超出就不顯示滾動條設計最大高度，當超出時出現滾動條，設置滾動條樣式怎么讓div內容超出后自動顯示滾動條