How to remove weird right margin of overflow-y: auto(如何删除奇怪的溢出右边距-y：Auto)
问题描述
因此，我一直在尝试将垂直滚动添加到我的模式中。这是成功的一半。
css和所有内容都工作正常，但我有一个奇怪的右边距，似乎无法删除。
我尝试使用Inspect元素，但什么都不起作用。
顺便说一下，当我移除溢出时-y：AUTO布局正常(OFC，无法滚动) 所以在我的结论中，是css overflow-y：Auto创建了那个奇怪的边距-右。 有人可以帮助我或向我解释这一点以及如何删除它吗？ 有关详细信息，请参阅所附图片。 PS。我认为没有必要在这里发布代码，因为它只是css/* 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="aW1hZ2VzL2ltZy9zdG9jay9iYWJ5LWJhY2stcmlicy5qcGVn" alt="YmxvZy1pbWc=">
</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="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzMuMy4xL2pxdWVyeS5taW4uanM="></script>
<script src="aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjcvanMvYm9vdHN0cmFwLm1pbi5qcw=="></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="aHR0cHM6Ly9pbWFnZS5mcmVlcGlrLmNvbS9mcmVlLXBzZC9mYXN0LWZvb2QtY29uY2VwdC1iYW5uZXItdGVtcGxhdGVfMjMtMjE0ODc3Nzk2NC5qcGc=" alt="YmxvZy1pbWc=">
</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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本文标题为：如何删除奇怪的溢出右边距-y：Auto
- 400或500级别的HTTP响应 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- Css：将嵌套元素定位在父元素边界之外一点 2022-09-07
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- Fetch API 如何获取响应体? 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- 失败的 Canvas 360 jquery 插件 2022-01-01
- CSS媒体查询(最大高度)不起作用，但为什么？ 2022-01-01
- Quasar 2+Apollo：错误：找不到ID为默认的Apollo客户端。如果您在组件设置之外，请使用ProvideApolloClient() 2022-01-01
