防止div超過屏幕

Question

我有一個div顯示在按鈕下方。只要按鈕位於屏幕的左側，即可使用工程文件 。但是如果按鈕位於右側，則該框會超出屏幕的大小。

我希望盒子儘量顯示在按鈕下方，如果可能的話右邊。 但是，如果不可能，只需將屏幕向左移動，以使模態div的右邊緣成爲屏幕的邊緣。 如果可能，最好使用jQLite。

希望這是有道理的，有人可以提供幫助。

標記：

.dd-combo .dd-combo-wrapper { 
    z-index: 10; 
    text-align: left; 
    background-color: #ffffff; 
    position: absolute; 
    max-width: 1024px; 
    min-width: 900px; 
    min-height:300px; 
    max-height:600px; 
    top: 100%; 
    left: -250px; 
    right:10px; 
    width: 1700%; 
    margin: 5px auto; 
    box-shadow: 10px 10px 5px #888; 
    overflow:scroll; 
    border-top: 1px solid #ddd; 
    border-left: 1px solid #ddd; 
} 
.dd-combo .dd-combo-wrapper:before { 
    content: ''; 
    display: none; 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 11px solid #BF1E4B; 
    position: absolute; 
    top: -10px; 
    left: 50%; 
    margin-left: -10px; 
} 

Answer 1

我不知道的一條筆直的路只用CSS這樣做，如果該按鈕可以在任何地方在屏幕上，並基於類不會改變在其左側或右側位置。如果我打算用javascript來做，我會這樣做：

function whenMenuOpens(){ 
    if(theMenu.getBoundingClientRect().right > window.innerWidth){ 
    theMenu.css({'position':'fixed', 'right':0}); 
    //or relative with an offset of the difference in overlap, etc 
    }else{ 
    //whatever you were doing before 
    } 
}