根據屏幕大小和父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

回答

相關問題