如何删除溢出-y的奇怪右边距：自动

Posted 2023-02-19

【中文标题】如何删除溢出-y的奇怪右边距：自动

【英文标题】：How to remove weird right margin of overflow-y: auto

【发布时间】：2022-01-21 19:16:47

【问题描述】：

所以我一直在尝试将垂直滚动添加到我的模式中。成功了一半。

CSS 和所有内容都运行良好，但我遇到了这个奇怪的 ma​​rgin-right，似乎 无法删除。

我尝试使用检查元素，但没有任何效果。

顺便说一句，当我删除了overflow-y: auto 布局是好的（ofc，不能滚动）

因此，在我的结论中，CSS overflow-y: auto 是创建那个奇怪的margin-right 的那个。

有人可以帮助我或向我解释一下以及如何删除它吗？

详情请查看附件图片。

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">&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" >
        </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 See how it looks like

这是元素面板，奇怪的是没有右边距值。 Weird margin-right Full Inspect Element Panel

【参考方案1】：

如果你想说你添加了一个垂直滚动条但它在x轴上自动溢出。然后将这个属性也添加到overflow-x: hidden 它将删除右侧的空格或将删除水平滚动条。

【参考方案2】：

尝试将overflow-y设置为overlay。这应该使滚动条仅显示为叠加层，因此不会影响元素的宽度！

.modal-body
    overflow-y: overlay;

【讨论】：

我试过了，但没有任何效果。 @Spankied

试试overflow-y: overlay;

【参考方案3】：

您可以在模态主体上使用overflow-y: scroll;。我把你的身高改成200px来演示。另外，对于边距，请尝试 margin-right: 0; 而不是 scroll-margin-right

/* 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 
    /*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.*/
    height: 200px;
    margin-right: 0px !important;
    overflow: scroll;

  
  .modal-footer 
    border-top: 0px !important;
  

<!-- 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" >
        </div>
        <div class="content-right">
            <h3><?= $menu_name ?></h3>
            <p class="food-description"><?= $menu_desc ?></p>
            <p class="modalPrice">₱ <?= $menu_price ?> </p>
            <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</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>

【参考方案4】：

在这你的代码工作正常，如果可能的话使用引导 css 和 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" >
        </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>

【讨论】：

我不知道为什么会有一个奇怪的边距，但我通过使用另一个 解决了这个问题，所以 只有高度元素，然后是滚动溢出。我添加了一个新的 并且它起作用了！谢谢你的回答。真的很感谢你们。