javascript - 根据屏幕大小和父 div 位置定位子 div

Question

我有一个 div(它基本上是一个按钮)显示另一个 div(它基本上是一些元素的容器)。

检查真实世界的例子:

还有一个 working example in Plunkr .

如你所见，容器层放置在带有

的按钮下方

position: absolute;

如果按钮位于页面左上角的某处，则效果很好，但如果按钮位于页面底部或右侧某处，则效果不佳，因为它始终显示在按钮下方，并且向右扩展。这会导致图层呈现在网页可见区域之外并创建滚动。

有什么方法可以只使用 CSS 来完成以下操作:

• 如果右侧没有足够的空间，则通过将图层的右上角放置到按钮的右下角来渲染图层。
• 如果底部没有足够的空间，则通过将图层放置在按钮顶部来渲染该图层。

请注意，我以前不知道图层的宽度或高度。

这可以是 HTML5/CSS3 解决方案，我不需要支持旧浏览器。

Answer 1

据我所知是不可能的。可能的方法是使用 javascript 检测它，或者如果您只想使用 CSS，则必须定义位置类。示例:

HTML

<div class="dropdown btm-right">
  <span class="button">Button</span>
  <div class="items">
    <span class="item">Item</span>
  </div>
</div>

CSS

.dropdown {
  display: inline-block;
  position: fixed;
}
.dropdown:hover .items {
  display: inline-block;
}
.dropdown.btm-right {
  bottom: 10px;
  right: 10px;
}
.dropdown.top-right {
  top: 10px;
  right: 10px;
}
.dropdown .button {
  position: relative;
  z-index: 1;
}
.dropdown .items {
  position: absolute;
  display: none;
}
.dropdown.btm-right .items {
  right: 0;
  bottom: 100%;
}
.dropdown.top-right .items {
  top: 100%;
  right: 0;
}

然后我们可以使用 btm-right 或 top-right 类来定位下拉菜单。谢谢!