ausblenden Überlauf-y Bildlaufleisten, wenn nicht benötigt

Question

Im overflow-y mit meinem divs vertikalen Scrollbalken (offensichtlich ja ik) zu geben, aber dabei hält die Bildlaufleisten auf den divs ich möchte wissen, wie sich nur auf die Bildlaufleisten angezeigt, wenn

benötigt

A div in meinem Code sieht wie folgt aus

<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> 

der CSS zu diesem Code gehör ist

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

auch die Panel-Klasse kommt aus Bootstrap

EDIT hier meine Seite ist, wenn zu sehen, das Problem http://flameforged.altervista.org/games2/ci/

Answer 1

Verwendung overflow: auto;. Es klappt. Ich habe es getestet. Ihre Seite scrollt und nicht Ihr div, wenn Sie Ihre Höhe auf 100% setzen. Verwenden Sie in diesem Fall nicht Prozent. Benutze stattdessen px. Für diejenigen, die eine Bildschirmgrößenkompatibilität wünschen, kann vh (relativ zu 1% der Höhe des Ansichtsfensters) anstelle von% verwendet werden.

Answer 2

die overflow-y Eigenschaft auto Set hilft: overflow-y: auto;

Edit:

versuchen, die CSS zu ändern:

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

Wenn das nicht funktioniert, versuchen:

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

Answer 3

Ich denke, es ist nicht möglich, es mit reinem CSS zu tun. Wenn Sie nicht zögern, Javascript zu verwenden, können Sie den Unterschied zwischen scrollHeight vs innerHeight Ihrer DIV überprüfen (vorausgesetzt, Sie haben eine Höhe für diese DIV angegeben) und ändern Sie die overflow-y Eigenschaft entsprechend. Unten ist ein Beispiel.

var intervalID = setInterval(function() { 
 
    $('#div').html($('#div').html() + 'A new line added.<br />'); 
 
    if (($('#div')[0].scrollHeight > $('#div').innerHeight()) && ($('#div').css('overflow-y') === 'hidden')) { 
 
    $('#div').css('overflow-y', 'auto'); 
 
    clearInterval(intervalID); 
 
    } 
 
}, 100);

#div { 
 
    height: 200px; 
 
    overflow-y: hidden; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="div"> 
 
</div>