如何删除奇怪的溢出右边距-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">&times;</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>

这是由Overflow-y：Auto生成的奇怪的右边距的屏幕截图 See how it looks like

这是元素面板，奇怪的是没有右边距的值。 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">&times;</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>