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

我有一个div（它基本上是一个按钮），显示另一个div（基本上是一些项目的容器）。根据屏幕大小和父div位置定位一个子div

检查现实世界的例子：

enter image description here

正如你所看到的，容器层被放置在按钮下方有

position: absolute;

如果按钮是在页面的左上角的地方，工作正常，但不是很好，如果按钮是因为它总是显示在按钮的下方并且向右扩展到底部或页面右侧的某处。这会导致图层被渲染到网页可见区域之外并创建卷轴。

有没有什么办法，我能做的只有CSS如下：

如果没有足够的空间Ø权，通过将层的右上角右下角渲染层的按钮。
如果底部没有足够的空间，通过将其放置在按钮顶部来渲染图层。

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

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

来源

2015-06-16 alexandernst

CSS无法检测到您的布局和元素的空间......所以我会认为JS会是这里的答案。 –

@Paulie_D我认为，经过15年和下一代CSS standart这将是最后可能没有JS :( – alexandernst

哦，亲爱的我不... ... CSS不能检测到任何东西，它不可能它会永远..将它的样式基于选择器并相应地运用规则 –

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类定位下拉。谢谢！

来源

2015-06-16 10:07:17

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

回答

相关问题