CSS 如何只为模态体放置滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25874001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put scroll bar only for modal-body?
提问by Subodh Nijsure
I have the following element:
我有以下元素：
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
It shows modal dialog something like this, basically, it puts scroll bar around entire modal-dialogand not modal-bodythat contains the content I am trying to display.
它显示了类似这样的模态对话框，基本上，它在整个周围放置滚动条，modal-dialog而不是modal-body包含我试图显示的内容。
The image looks something like this:
图像看起来像这样：
How do I get a scroll bar around modal-bodyonly?
如何modal-body仅获得滚动条？
I have tried assigning style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"to modal-bodybut it didn't work.
我试过分配给style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"，modal-body但没有用。
回答by Carlos Calla
You have to set the heightof the .modal-bodyin and give it overflow-y: auto. Also reset .modal-dialogoverflow value to initial.
你要设置height的.modal-body中，并给它overflow-y: auto。还将.modal-dialog溢出值重置为initial.
See the working sample:
查看工作示例：
http://www.bootply.com/T0yF2ZNTUd
http://www.bootply.com/T0yF2ZNTUd
.modal{
display: block !important; /* I added this to see the modal, you don't need this */
}
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
回答by Jonathan Marston
If you're only supporting IE 9 or higher, you can use this CSS that will smoothly scale to the size of the window. You may need to tweak the "200px" though, depending on the height of your header or footer.
如果你只支持 IE 9 或更高版本，你可以使用这个 CSS 来平滑缩放到窗口的大小。不过，您可能需要调整“200px”，具体取决于页眉或页脚的高度。
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
回答by Iib Thoyib Basarah
Problem solved with combine solution @carlos calla and @jonathan marston.
问题通过组合解决方案 @carlos calla 和 @jonathan marston 解决。
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
回答by Kodos Johnson
For Bootstrap versions >= 4.3
对于 Bootstrap 版本 >= 4.3
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-bodycontent scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollableto the same div that has the modal-dialogclass.
Bootstrap 4.3 向模态添加了新的内置滚动功能。如果内容的大小会使页面滚动，则这只会使模态正文内容滚动。要使用它，只需将modal-dialog-scrollable类添加到具有modal-dialog类的同一个 div 中。
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">×</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>回答by laurakurup
Adding on to Carlos Calla's great answer.
加入Carlos Calla的精彩回答。
The height of .modal-body must be set, BUT you can use media queries to make sure it's appropriate for the screen size.
必须设置 .modal-body 的高度，但您可以使用媒体查询来确保它适合屏幕尺寸。
.modal-body{
height: 250px;
overflow-y: auto;
}
@media (min-height: 500px) {
.modal-body { height: 400px; }
}
@media (min-height: 800px) {
.modal-body { height: 600px; }
}
回答by dimbslmh
Optional: If you don't want the modal to exceed the window height and use a scrollbar in the .modal-body, you can use this responsive solution. See a working demo here: http://codepen.io/dimbslmh/full/mKfCc/
可选：如果您不希望模态超过窗口高度并在 .modal-body 中使用滚动条，则可以使用此响应式解决方案。在此处查看工作演示：http: //codepen.io/dimbslmh/full/mKfCc/
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() > 767 ? 60 : 20;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
回答by Bogus Hawtsauce
I know this is an old topic but this may help someone else.
我知道这是一个古老的话题，但这可能对其他人有所帮助。
I was able to make the body scroll by making the modal-dialog element position fixed. And since I would never know the exact height of the browser window, I took the information I was sure about, the height of the header and the footer. I was then able to make the modal-body element's top and bottom margins match those heights. This then produced the result I was looking for. I threw together a fiddle to show my work.
我能够通过固定模态对话框元素位置来使主体滚动。因为我永远不会知道浏览器窗口的确切高度，所以我获取了我确定的信息，即页眉和页脚的高度。然后我能够使 modal-body 元素的顶部和底部边距与这些高度相匹配。然后这产生了我正在寻找的结果。我拼凑了一把小提琴来展示我的作品。
also, if you want a full screen dialog just un-comment the width:auto; inside the .modal-dialog.full-screen section.
另外，如果你想要一个全屏对话框，只需取消注释 width:auto; 在 .modal-dialog.full-screen 部分内。
https://jsfiddle.net/lot224/znrktLej/
https://jsfiddle.net/lot224/znrktLej/
And here is the css that I used to modify the bootstrap dialog.
这是我用来修改引导对话框的 css。
.modal-dialog.full-screen {
position:fixed;
//width:auto; // uncomment to make the width based on the left/right attributes.
margin:auto;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
.modal-dialog.full-screen .modal-content {
position:absolute;
left:10px;
right:10px;
top:10px;
bottom:10px;
}
.modal-dialog.full-screen .modal-content .modal-header {
height:55px; // adjust as needed.
}
.modal-dialog.full-screen .modal-content .modal-body {
overflow-y: auto;
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
margin-top: 55px; // .modal-header height
margin-bottom: 80px; // .modal-footer height
}
.modal-dialog.full-screen .modal-content .modal-footer {
height:80px; // adjust as needed.
position:absolute;
bottom:0;
left:0;
right:0;
}
回答by user7695590
Or simpler you can put between your tags first, then to the css class.
或者更简单的是，您可以先将标签放在标签之间，然后再放入 css 类。
<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
回答by njoshsn
What worked for me is setting the height to 100% the having the overflow on auto hope this will help
对我有用的是将高度设置为 100% 自动溢出希望这会有所帮助
<div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>
回答by Steven
#scroll-wrap {
max-height: 50vh;
overflow-y: auto;
}
Using max-heightwith vhas the unit on the modal-bodyor a wrapper div inside of the modal-body. This will resize the height of modal-bodyor the wrapping div(in this example) automatically when a user resize the window.
使用max-heightwithvh作为单位modal-body或modal-body. modal-body当用户调整窗口大小时，这将自动调整高度或环绕 div（在本例中）的大小。
vhis length unit representing 1% of the viewport size for viewport height.
vh是长度单位，表示视口高度的视口大小的 1%。
Browser compatibilitychart for vhunit.
vh单位的浏览器兼容性图表。
Example: https://jsfiddle.net/q3xwr53f/
