css - 除非需要，否则隐藏 overflow-y 滚动条

Question

我正在使用 overflow-y 为我的 div 提供垂直滚动条(显然是的)但这样做会保留 div 上的滚动条我想知道如何只在需要时显示滚动条

我的代码中的一个 div 看起来像这样

<div class="panel left" id="terminalPanel">
        <center><h4>Terminal</h4></center>
        <hr>
        <b>Money:</b> <span id="money"></span><br>
        <b>Level: </b><span id="level"></span><br>
        <b>Exp:</b> <progress id="expProgress" value="2" max="3"></progress>
        <center><canvas id="terminalCanvas" width="200" height="200"></canvas></center>
    </div>

与此代码相关的 css 是

.left{
        float:left;
        width:25%;
        height:100%;
        overflow: auto;
        overflow-y: auto;
    }

面板类也来自bootstrap

编辑如果看到问题有帮助，这是我的页面 http://flameforged.altervista.org/games2/ci/

Answer 1

使用溢出:自动；。有用。我已经测试过了。如果您将高度设置为 100%，您的页面将滚动而不是您的 div。在这种情况下不要使用百分比。请改用 px。然而对于那些想要屏幕尺寸兼容性的人可以使用 vh(相对于视口(viewport)高度的 1%)而不是 %。