blocks|key|4578487|text|您必须在中设置.modal-body的height并将其设置为overflow-y:+auto。同时将.modal-dialog溢出值重置为initial。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4578488|请参阅工作示例：|4578489|http://www.bootply.com/T0yF2ZNTUd|4578490|.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;
}|code-block|syntax|javascript|4578491|entityMap|0|LINK|mutability|MUTABLE|url^0|7|B|J|6|V|G|1F|D|1Y|7|0|0|0|X|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|I]]]]

You have to set the <code>height</code> of the <code>.modal-body</code> in and give it <code>overflow-y: auto</code>. Also reset <code>.modal-dialog</code> overflow value to <code>initial</code>.
See the working sample:
<a href="http://www.bootply.com/T0yF2ZNTUd" rel="noreferrer">http://www.bootply.com/T0yF2ZNTUd</a>
<pre><code>.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;
}
</code></pre>

blocks|key|72135|text|这是对Carlos+Calla的精彩回答的补充。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|72136|必须设置.mode-body的高度，但您可以使用媒体查询来确保它适合屏幕大小。|72137|.modal-body{
++++height:+250px;
++++overflow-y:+auto;
}

@media+(min-height:+500px)+{
++++.modal-body+{+height:+400px;+}
}

@media+(min-height:+800px)+{
++++.modal-body+{+height:+600px;+}
}|code-block|syntax|javascript|72138|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/2537048/carlos-calla^0|3|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Adding on to <a href="https://stackoverflow.com/users/2537048/carlos-calla">Carlos Calla</a>'s great answer.

The height of .modal-body must be set, BUT you can use media queries to make sure it's appropriate for the screen size.

<pre><code>.modal-body{
 height: 250px;
 overflow-y: auto;
}

@media (min-height: 500px) {
 .modal-body { height: 400px; }
}

@media (min-height: 800px) {
 .modal-body { height: 600px; }
}
</code></pre>

blocks|key|4578557|text|如果你只支持IE9或更高版本，你可以使用这个CSS，它可以平滑地缩放到窗口的大小。你可能需要调整"200px“，这取决于你的页眉或页脚的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4578558|.modal-body{
++++max-height:+calc(100vh+-+200px);
++++overflow-y:+auto;
}|code-block|syntax|javascript|4578559|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>.modal-body{
 max-height: calc(100vh - 200px);
 overflow-y: auto;
}
</code></pre>

blocks|key|4578609|text|一个简单的js解决方案，用于设置模式高度与身体高度成正比：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4578610|$(document).ready(function+()+{
++++$('head').append('<style+type="text/css">.modal+.modal-body+{max-height:+'+%2B+($('body').height()+*+.8)+%2B+'px;overflow-y:+auto;}.modal-open+.modal{overflow-y:+hidden+!important;}</style>');
});|code-block|syntax|javascript|4578611|body的高度必须是100%25：|4578612|html,+body+{
++++height:+100%25;
++++min-height:+100%25;
}|4578613|我将车身高度设置为车身的80%25，这当然可以自定义。|4578614|希望能有所帮助。|4578615|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

A simple js solution to set modal height proportional to body's height :

<pre><code>$(document).ready(function () {
 $('head').append('&lt;style type="text/css"&gt;.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}&lt;/style&gt;');
});
</code></pre>

body's height has to be 100% :

<pre><code>html, body {
 height: 100%;
 min-height: 100%;
}
</code></pre>

I set modal body height to 80% of body, this can be of course customized.

Hope it helps.

blocks|key|4578658|text|#scroll-wrap+{
++++max-height:+50vh;
++++overflow-y:+auto;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4578659|使用带有vh的max-height作为modal-body上的单元或modal-body内部的包装器div。当用户调整窗口大小时，这将自动调整modal-body或包装div的高度(在本例中)。|unstyled|offset|length|style|CODE|4578660|vh是长度单位，表示视口高度的视口大小的1%25。|4578661|vh单元的Browser+compatibility图表。|4578662|示例：https://jsfiddle.net/q3xwr53f/|4578663|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=viewport-units|1|https://jsfiddle.net/q3xwr53f/^0|0|4|2|7|A|J|A|Y|A|1Z|A|0|0|2|0|0|2|5|L|0|0|3|U|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|11|8|@$G|12|H|13|I|J]|$G|14|H|15|I|J]|$G|16|H|17|I|J]|$G|18|H|19|I|J]|$G|1A|H|1B|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|1C|8|@$G|1D|H|1E|I|J]]|9|@]|A|$]]|$1|M|3|N|5|F|7|1F|8|@$G|1G|H|1H|I|J]]|9|@$G|1I|H|1J|1|1K]]|A|$]]|$1|O|3|P|5|F|7|1L|8|@]|9|@$G|1M|H|1N|1|1O]]|A|$]]|$1|Q|3|-4|5|F|7|1P|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<pre><code>#scroll-wrap {
 max-height: 50vh;
 overflow-y: auto;
}
</code></pre>

Using <code>max-height</code> with <code>vh</code> as the unit on the <code>modal-body</code> or a wrapper div inside of the <code>modal-body</code>. This will resize the height of <code>modal-body</code> or the wrapping div(in this example) automatically when a user resize the window.

<code>vh</code> is length unit representing 1% of the viewport size for viewport height.

<a href="http://caniuse.com/#feat=viewport-units" rel="nofollow">Browser compatibility</a> chart for <code>vh</code> unit.

Example: <a href="https://jsfiddle.net/q3xwr53f/" rel="nofollow">https://jsfiddle.net/q3xwr53f/</a>

blocks|key|72320|text|使用联合解决方案@carlos+calla和@jonathan+marston解决了问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|72321|++++/*+Important+part+*/
.modal-dialog{
++++overflow-y:+initial+!important
}
.modal-body{
++++max-height:+calc(100vh+-+200px);
++++overflow-y:+auto;
}|code-block|syntax|javascript|72322|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Problem solved with combine solution @carlos calla and @jonathan marston.

<pre><code> /* Important part */
.modal-dialog{
 overflow-y: initial !important
}
.modal-body{
 max-height: calc(100vh - 200px);
 overflow-y: auto;
}
</code></pre>

blocks|key|4578731|text|我知道这是一个古老的话题，但这可能会对其他人有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4578732|我能够通过固定模式对话框元素的位置来使正文滚动。因为我永远不会知道浏览器窗口的确切高度，所以我获取了我确信的信息，页眉和页脚的高度。然后，我可以使modal-body元素的顶部和底部边距与这些高度相匹配。这就产生了我想要的结果。我拼凑了一把小提琴来展示我的作品。|4578733|另外，如果你想要一个全屏对话框，只需取消注释.mode-Dialog.full-+screen部分中的width:auto；即可。|4578734|https://jsfiddle.net/lot224/znrktLej/|offset|length|4578735|下面是我用来修改引导对话框的css。|4578736|.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;
}|code-block|syntax|javascript|4578737|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|11|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@$H|11|I|12|1|13]]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|15|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|G]]]]

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.

also, if you want a full screen dialog just un-comment the width:auto; inside the .modal-dialog.full-screen section.

<a href="https://jsfiddle.net/lot224/znrktLej/" rel="noreferrer">https://jsfiddle.net/lot224/znrktLej/</a>

And here is the css that I used to modify the bootstrap dialog.

<pre><code>.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;
}
</code></pre>

blocks|key|72428|text|或者更简单，可以先放在标签之间，然后放到css类中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|72429|<div+style="height:+35px;overflow-y:+auto;">+Some+text+o+othre+div+scroll+</div>|code-block|syntax|javascript|72430|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Or simpler you can put between your tags first, then to the css class.

<pre><code>&lt;div style="height: 35px;overflow-y: auto;"&gt; Some text o othre div scroll &lt;/div&gt;
</code></pre>

blocks|key|72468|text|对我有效的是将高度设置为100%25自动溢出希望这会有所帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|72469|+++<div+style="height:+100%25;overflow-y:+auto;">+Some+text+o+othre+div+scroll+</div>|code-block|syntax|javascript|72470|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

What worked for me is setting the height to 100% the having the overflow on auto 
hope this will help

<pre><code> &lt;div style="height: 100%;overflow-y: auto;"&gt; Some text o othre div scroll &lt;/div&gt;
</code></pre>

blocks|key|72534|text|在你的模式主体中，你必须设置一个高度，它可以是%25+vh或calc：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|72535|modal-body+{
++++height:+80vh;
++++overflow-x:+auto;
}|code-block|syntax|javascript|72536|或|72537|modal-body+{
++++height:+calc(100vh+-+5em);
++++overflow-x:+auto;
}|72538|在我的例子中，如下所示：|72539|📷|atomic|offset|length|72540|​|72541|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fb136c69b2d3d78ce254da1faa1645b4.png|imageAlt^0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|17|8|@]|9|@$P|18|Q|19|1|1A]]|A|$]]|$1|R|3|S|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10|11|-4]]]]

In your modal body you have to set a height, it can be % vh or calc:
<pre><code>modal-body {
 height: 80vh;
 overflow-x: auto;
}
</code></pre>
or
<pre><code>modal-body {
 height: calc(100vh - 5em);
 overflow-x: auto;
}
</code></pre>
In my case look like:
<a href="https://i.stack.imgur.com/6TQHT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6TQHT.png" alt="enter image description here" /></a>

blocks|key|4578930|text|如果您使用的是Bootstrap4.5或更高版本，则添加类modal-dialog-scrollable|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4578931|否则|4578932|.modal-body{
++++height+:100%25;
++++over-flow-y:auto;
}|code-block|syntax|javascript|4578933|entityMap^0|T|N|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

add class <code>modal-dialog-scrollable</code> if you are using bootstrap 4.5 or higher
else
<pre><code>.modal-body{
 height :100%;
 over-flow-y:auto;
}
</code></pre>

I have the following element:

<pre><code>&lt;div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; 
 &lt;div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" &gt; 
 &lt;div class="modal-content"&gt; 
 &lt;div class="modal-header"&gt; 
 &lt;h3 class="modal-title"&gt;&lt;/h3&gt; 
 &lt;/div&gt; 
 &lt;div class="modal-body"&gt;&lt;/div&gt; 
 &lt;div class="modal-footer"&gt;&lt;/div&gt; 
 &lt;/div&gt; 
 &lt;/div&gt; 
&lt;/div&gt; 
</code></pre>

It shows modal dialog something like this, basically, it puts scroll bar around entire <code>modal-dialog</code> and not <code>modal-body</code> that contains the content I am trying to display.

The image looks something like this:

<a href="https://i.stack.imgur.com/M41N2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M41N2.png" alt="enter image description here"></a>

How do I get a scroll bar around <code>modal-body</code> only?

I have tried assigning <code>style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"</code> to <code>modal-body</code> but it didn't work.

How to put scroll bar only for modal-body?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有以下元素：<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll...

问如何将滚动条仅用于模态-body？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将滚动条仅用于模态-body？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将滚动条仅用于模态-body？
EN