如何删除奇怪的溢出右边距-y：Auto [英] How to remove weird right margin of overflow-y: auto
本文介绍了如何删除奇怪的溢出右边距-y：Auto的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
因此，我一直在尝试将垂直滚动添加到我的模式中。这是成功的一半。
css和所有内容都工作正常，但我有一个奇怪的右边距，似乎无法删除
。我尝试使用Inspect元素，但什么都不起作用。
顺便说一下，当我移除溢出时-y：AUTO布局正常(OFC，无法滚动)
所以在我的结论中，是css overflow-y：Auto创建了那个奇怪的边距-右。
有人可以帮助我或向我解释这一点以及如何删除它吗？
有关详细信息，请参阅所附图片。
PS。我认为没有必要在这里发布代码，因为它只是css
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">/* View Menu-Modal */
.modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
height: 70vh;
overflow-y: auto;
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
margin-right: 0px !important;
}
.modal-footer {
border-top: 0px !important;
}
#view-menu-modal::-webkit-scrollbar {
display:none
}<!-- Modal -->
<div class="modal fade" id="viewMenuModal<?= $menu_id ?>" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="images/img/stock/baby-back-ribs.jpeg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>这是元素面板，奇怪的是没有右边距的值。 Weird margin-right Full Inspect Element Panel
推荐答案
在这种情况下，您的代码运行良好，如果可能，请使用引导css和js
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"> .modalMenu {
float: none;
width: 100%;
height: 200px;
}
.modalMenu-img {
width: 100%;
height:100%;
object-fit:cover;
border-radius: 8px;
}
.modalPrice {
font-size: 24px;
line-height: 28px;
margin: 0px;
font-family: 'Barlow', sans-serif;
}
.modal-dialog {
height: 100% !important;
}
.modal-header {
border-bottom: 0px !important;
}
.modal-content {
border: 0px !important;
height: auto;
min-height: 80%;
border-radius: 12px;
}
.modal-body {
height: 70vh;
overflow-y: auto;
/*THIS IS WHERE THE SCROLL is, when I added this ofc it ads a vertical scroll but at the same time the annoying right-margin.*/
margin-right: 0px !important;
}
.modal-footer {
border-top: 0px !important;
}
#view-menu-modal::-webkit-scrollbar {
/*display:none*/
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#viewMenuModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="viewMenuModal" tabindex="-1" role="dialog" aria-labelledby="viewOrderModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="view-menu-modal"> <!--THIS IS WHERE THE OVERFLOW-Y: auto is applied -->
<div class="modalMenu mb-2">
<img class="modalMenu-img" src="https://image.freepik.com/free-psd/fast-food-concept-banner-template_23-2148777964.jpg" alt="blog-img">
</div>
<div class="content-right">
<h3><?= $menu_name ?></h3>
<p class="food-description"><?= $menu_desc ?></p>
<p class="modalPrice">₱ <?= $menu_price ?> </p>
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-lg primary-btnLink mb-1">Add to Order</button>
<button type="button" class="btn btn-lg secondary-ghostBtn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>这篇关于如何删除奇怪的溢出右边距-y：Auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
