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

【问题标题】：CSS: how to contain absolute element inside window containerCSS：如何在窗口容器内包含绝对元素
【发布时间】：2020-10-07 16:22:23
【问题描述】：

CSS 有办法在窗口容器中包含绝对 div 吗？（如果 div position + div width > window.innerWidth，则将 div 向左平移）

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

这是一个重做的 sn-p：

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>

【问题讨论】：

这没有任何意义 - “CSS 有办法在屏幕内包含绝对 div 吗？”你能让问题相对于你的问题更容易理解吗
我改变了问题，但很抱歉，我不知道如何更好地理解这个问题。
包含是什么意思？包含什么？发生了什么你不想发生的事情？
检查sn-p。如果您将鼠标悬停在菜单 5 上，您会看到下拉菜单，但它会被拆分。我希望这个下拉菜单向左移动（拥有整个菜单）并包含在这个容器（又名屏幕）中。
我认为问题是如何防止子菜单超出菜单的右边框并使它们与之对齐

标签： javascript css screen

【解决方案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');
  }
});

【讨论】：