高さがブラウザを超えている場合、スクロールするブートストラップのモーダルコンテンツを設定します。

Question

これについて多くの人が尋ねてきましたが、

モーダルの高さがブラウザの内部高さを超える場合は、赤い枠線で区切られたDivにブラウザバー内にモーダルを維持するためのスクロールバーが必要です。

#scrollbox { 
 
    border: 1px solid red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<input type="button" data-toggle="modal" data-target="#myModal" value="Launch Modal"> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     Hello, below is some text in a div that should start scrolling if the height of the modal exceeds the browser. 
 
     
 
     <p><div id="scrollbox"> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

overflow-y:autoとvh unitsを使用してこれを行うことができます。 scrollboxのmax-heightプロパティを100vh（完全なビューポートの高さ）に設定し、scrollbox（ビューポート内に保持したい）以外のすべてのものを考慮に入れて任意の数のピクセルを減算します。次に、コンテンツがmax-heightを超えると、スクロールバーが表示されるように、overflow-y:autoルールを追加します。これは、this answerとかなり似ていますが、jQueryではなくCSSを使用しています。

#scrollbox { 
 
border: 1px solid red; 
 
overflow-y: auto; 
 
max-height: calc(100vh - 150px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<input type="button" data-toggle="modal" data-target="#myModal" value="Launch Modal"> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     Hello, below is some text in a div that should start scrolling if the height of the modal exceeds the browser. 
 
     
 
     <p><div id="scrollbox"> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
      the<br>quick<br>brown<br>fox<br> 
 
     </div> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたは窓の高さにベースに最大高さをasignするjqueryのを使用することができ、私はそのような状況のため、このコードを使用します。

のjQueryを：

<script> 
$(function() { 
    // Get the height of the window 
    var height = $(window).height(); 
    $('#scrollbox').css('max-height', height+'px'); 
}); 
</script> 

例えば、私は窓の高さに100pxにを減算したい、窓の高さにピクセルを減算：

var height = ($(window).height() - 100); 

のCss：

#scrollbox{ 
    overflow-y: auto; 
} 

私が役に立つことを願っています。

よろしくお願いいたします。