這個邊界來自哪裏？

我有一個彈出窗口出現在網頁上。（它基本上是一個模式）這個邊界來自哪裏？

當它出現時，它創建一個滾動條可能的空間，但沒有滾動條存在。一個應該出現在彈出窗口（藍色背景）上。它幾乎看起來好像彈出窗口上出現的滾動條只是顯示在彈出窗口中，但就文檔而言，它仍然在頁面的右側。

我怎樣才能實現下面的屏幕截圖顯示的內容，但沒有右側的空白，模仿滾動條的位置？以下是彈出窗口的CSS，HTML和截圖。

CSS：

html { 
    overflow-y: scroll; 
    position: relative; 
} 

.popup{ 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 5%; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
} 

.popup .popup_content{ 
    background-color: rgba(0,0,50,.75); 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
    height: 90%; 
    border-radius: 15px; 
    overflow-y: scroll; 
}

HTML：

<div class='popup'> 
    <div class='popup_content'> 
    <!--Some profound text goes in the popup--> 
    </div> 
</div>

解決我已經解決了這個問題，一些額外的挖掘。像往常一樣，它看起來像bootstrap，增加了時髦的東西。我不得不重寫它們。見下面的答案。

編輯：我已更改標題以更好地反映未來用戶的真實問題。這個問題是由bootstrap應用了一個-15px保證金造成的。

來源

2017-06-19 jkessluk

看起來像我發現了這個問題。在這個網頁上，我們使用bootstrap來製作一些特定的樣式。在彈出div上面的<div>上，我們使用了一個引導「行」類。這似乎應用了-15px margin-left和margin-right。這是導致問題的原因。我已經通過在我的css中放置margin: 0;來覆蓋bootstrap css來糾正它。例如：

.popup{ 
    margin: 0; //Here is what I added :) 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 5%; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

來源

2017-06-19 19:12:55 jkessluk

這個邊界來自哪裏？

回答

相關問題