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

mqui 发布于 2019-07-12 css 最后更新 2019-07-12 09:32 1 浏览

我有一个div(这基本上是一个按钮),显示另一个div(这基本上是一些项目的容器)。 检查真实世界的例子:

enter image description here 还有一个working example in Plunkr。 正如你所看到的,容器层被放置在按钮下面
position: absolute;
如果按钮位于页面左上角的某个位置,它可以正常工作,但如果按钮位于页面底部或右侧的某处,则效果不佳,因为它始终显示在按钮下方并展开为对。这会导致图层被渲染到网页可见区域之外并创建卷轴。 有没有什么办法可以只用CSS来做以下事情:
  • 如果右侧没有足够的空间,请将图层右上角放置在按钮的右下角来渲染图层。
  • 如果底部没有足够的空间,请将该图层放置在按钮顶部以呈现图层。
请注意,我以前不知道图层的宽度或高度。 这可以是HTML5 / CSS3解决方案,我不需要支持旧浏览器。
已邀请:

afuga

赞同来自:

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-righttop-right类来定位下拉列表。谢谢!