如何将滚动条仅用于模态-body？
如何将滚动条仅用于模态-body？
提问于 2014-09-17 00:30:56
我有以下元素：
<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> 它显示类似这样的模式对话框，基本上，它在整个modal-dialog而不是包含我试图显示的内容的modal-body周围放置滚动条。
图像如下所示：
如何仅在modal-body周围显示滚动条？
我曾尝试将style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"赋值给modal-body，但没有成功。
回答 11
Stack Overflow用户
回答已采纳
发布于 2014-09-17 01:06:59
您必须在中设置.modal-body的height并将其设置为overflow-y: auto。同时将.modal-dialog溢出值重置为initial。
请参阅工作示例：
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: 80vh;
overflow-y: auto;
}Stack Overflow用户
发布于 2015-08-08 00:15:03
如果你只支持IE9或更高版本，你可以使用这个CSS，它可以平滑地缩放到窗口的大小。你可能需要调整"200px“，这取决于你的页眉或页脚的高度。
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}Stack Overflow用户
发布于 2016-06-20 23:05:12
使用联合解决方案@carlos calla和@jonathan marston解决了问题。
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25874001
复制相关文章
相似问题