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

Question

我有一个div（基本上是一个按钮），显示另一个div（基本上是某些项目的容器）。

检查现实世界的例子：

和working example in Plunkr。

如您所见，容器图层位于按钮下方

position: absolute;

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

有什么办法可以用CSS完成以下任务：

• 如果右边没有足够的空间，可以通过将图层的右上角放在按钮的右下角来渲染图层。
• 如果底部没有足够的空间，请将图层放在按钮顶部来渲染图层。

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

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

Answer 1

AFAIK是不可能的。可能的方法是使用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类来定位下拉列表。谢谢！