如果高度超过浏览器，将 Bootstrap 模式内容设置为滚动 [英] Set Bootstrap modal content to scroll if height exceeds browser

查看：25
本文介绍了如果高度超过浏览器，将 Bootstrap 模式内容设置为滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我看到很多人问这个问题，但没有真正可靠的答案.

如果模态的高度超过浏览器的内部高度，我希望红色边框的 Div 有一个滚动条，使模态保持在浏览器视图中.

#scrollbox {边框:1px纯红色；}

<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="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-body">你好，下面是 div 中的一些文本，如果模态的高度超过浏览器，它应该开始滚动.<p><div id="scrollbox"><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br>

解决方案

对于 Bootstrap 版本 >= 4.3

Bootstrap 4.3 向模态添加了新的滚动功能.如果内容的大小会使页面滚动，则这只会使 modal-body 内容滚动.这可能不适用于 OP 的情况，因为他们在 modal-body 中有其他内容，但它可能对其他人有帮助.要使用它，只需将 modal-dialog-scrollable 类添加到具有 modal-dialog 类的同一个 div 中.

这是一个例子:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><!-- 按钮触发模态--><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">启动演示模式<!-- 模态--><div class="modalfade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalScrollableTitle">模态标题</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

<div class="modal-body"><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br>

<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button>


对于 Bootstrap 版本 <4.3(旧答案)

您可以使用 overflow-y:auto 和 vh 单位.将 scrollbox 的 max-height 属性设置为 100vh(完整视口高度)并减去一些任意数量的像素，以说明scrollbox(您希望保留在视口内).然后添加overflow-y:auto规则，如果内容超过max-height，就会出现滚动条.这与 this answer 非常相似，只是使用 CSS 而不是 jQuery.

#scrollbox {边框:1px纯红色；溢出-y:自动；最大高度:计算(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="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-body">你好，下面是 div 中的一些文本，如果模态的高度超过浏览器，它应该开始滚动.<p><div id="scrollbox"><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br><br>快速<br>棕色<br>狐狸<br>

I have seen so many people asking about this, but no real solid reliable answer.

If the height of the modal exceeds the browser's inner height, I want the red-bordered Div to have a scroll bar to keep the modal within the browser view.

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

解决方案

For Bootstrap versions >= 4.3

Bootstrap 4.3 added new scroll feature to modals. This makes only the modal-body content scroll if the size of the content would make the page scroll. This might not work for the OP's situation since they have other content in the modal-body, but it might be helpful to someone else. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.

Here is an example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        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 class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


For Bootstrap versions < 4.3 (old answer)

You can do this using overflow-y:auto and vh units. Set the max-height property of your scrollbox to 100vh (full viewport height) and subtract some arbitrary number of pixels to account for everything outside the scrollbox (that you want to keep inside the viewport). Then add the overflow-y:auto rule so that if the content exceeds the max-height, a scrollbar will appear. This is pretty similar to this answer except using CSS instead of 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>

这篇关于如果高度超过浏览器，将 Bootstrap 模式内容设置为滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆