防止div超出屏幕

Question

我有一个显示在按钮下方的div。 只要按钮位于屏幕左侧，就可以使用Works文件。但如果按钮位于右侧，则框超出屏幕大小。

如果可能的话，我希望该框能够尝试在按钮下方显示。 但如果不可能只在屏幕左侧需要的那么多，那么模态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
  }
}