CSS：如何在窗口容器内包含绝对元素

Question

CSS 有办法在窗口容器中包含绝对 div 吗？ （如果 div 位置 + div 宽度 > window.innerWidth，将 div 平移到左边）

我试图在 100% CSS ( https://codepen.io/team/css-tricks/pen/ZYoJda ) 中实现导航菜单，但是当我在屏幕右侧有菜单时，弹出菜单被屏幕分割。

这是一个重新设计的片段：

 nav > ul > li { display: inline-block; } nav > ul > li ul { visibility: hidden; position: absolute; top: 105%; left: 0; transition: 0.2s 1s; } nav > ul > li ul li { width: 300px; } nav > ul > li:hover ul { visibility: visible; transition-delay: 0s; } nav ul { list-style: none; padding: 0; margin: 0; width: 100%; } nav li { width: 100px; background: #eee; margin: 2px; position: relative; padding: 10px; width: 15%; } nav a { display: block; } div { position: relative; width: 100%; overflow-x: hidden; min-height: 200px; } body { padding: 10px; }

 <div> <nav> <ul> <li>No Menu 1</li> <li>No Menu 2</li> <li>Menu 3 <ul> <li><a href="#">Menu 3-1</a></li> <li><a href="#">Menu 3-2</a></li> <li><a href="#">Menu 3-3</a></li> </ul> </li> <li>Menu 4 <ul> <li><a href="#">Menu 4-1</a></li> <li><a href="#">Menu 4-2</a></li> <li><a href="#">Menu 4-3</a></li> </ul> </li> <li> Menu 5 <ul> <li><a href="#">Menu 5-1</a></li> <li><a href="#">Menu 5-2</a></li> <li><a href="#">Menu 5-3</a></li> </ul> </li> </ul> </nav> </div>

Answer 1

我找到了使用 JS 的解决方案（我更喜欢 CSS）。

我假设以下结构：

<ul>
  <li>Menu 1
    <ul class="dropdown">
      <li>Menu 1-1</li>
      <li>Menu 1-2</li>
    </ul>
  </li>
</ul>

我实现了以下JS：

const menus = document.querySelectorAll('.dropdown');

menus.forEach(menu => {
  const info = menu.getBoundingClientRect();
  const position = info.left + info.width;

  if (position > window.innerWidth) {
    // Function to update style
    this.rdr.setStyle(menu, 'left', (window.innerWidth - position) + 'px');
  }
});