javascript - 将绝对元素(下拉菜单)保留在视口(viewport)或窗口宽度中

Question

<li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DROPDOWN <span class="caret"></span></a>
                  <ul class="dropdown-menu menu-multicolumn">
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title">Multi Page</li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>

                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title"></li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>

                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title">One Page</li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title"></li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                  </ul>
                </li><!-- End of dropdown -->

CSS

 .dropdown-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 14px;
list-style: outside none none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
text-align: left;
top: 100%;
z-index: 1000;}

.menu-multicolumn {
white-space: nowrap;
width: auto !important;}

.menu-column {
display: inline-block;
float: none;
overflow: hidden;
vertical-align: top;
white-space: normal;
min-width: 190px;}

好吧，现在我正在考虑用 javascript 来确定 .dropdown-menu 元素超出窗口宽度的程度，然后设置与左侧相同的宽度:-(那个宽度);，所以 .dropdown-menu 元素将有灵活的左侧位置，并且始终位于窗口宽度内。

基本上，我需要确定有多少元素超出窗口宽度，然后将相同的数量设置为减去同一元素的左绝对位置。

Answer 1

也许它的想法太简单了，但如果我给你正确的方法，并且你总是希望右侧留在你的视口(viewport)内，你可以简单地这样做:

.dropdown-menu {
   position: absolute;
   right: 0px;
   left: auto;
}

您可以简单地将右侧的空间设置为零，而不是计算应该将左侧插入负边距多少!