如果高度超過瀏覽器，設置Bootstrap模態內容滾動

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（您希望保留在視口內）以外的所有內容。然後添加overflow-y:auto規則，以便如果內容超出max-height，則會出現一個滾動條。這與this answer非常相似，除了使用CSS而不是jQuery。

#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

您可以使用jQuery的在基地ASIGN一個最大高度到窗口的高度，我用這個代碼，這個情況：

jQuery的：

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

如果你想，你可以減去像素窗口的高度，比如我想減去100像素的窗口高度：

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

的CSS：

#scrollbox{ 
    overflow-y: auto; 
} 

我希望會有所幫助。

問候！