用頁面底部的距離限制高度

Question

我在一邊有一個按鈕的web應用程序。當我點擊其中一個按鈕時，* JavaScript magic *，它旁邊會出現一個菜單。腳本對定位或樣式一無所知，它只是找到一個目標元素，然後在其中寫入HTML。

總之，我有一個相對於其父母的位置（本例中爲#pretty-target）。

<div class="container"> 
    <button class="my-pretty-button">@</button> 
    <div class="menu-target" id="pretty-target"></div> 
</div> 

結果看起來是這樣的：

現在，當我減少頁面的高度，我想限制這種菜單的高度，取決於其距離底部這一頁。更非理想的結果應該是這樣的：

我知道最好的做法是有一個滾動的頁面主體，不操心這些元素的高度。不過，我的頁面主體是一張地圖，所以任何嘗試滾動它都會移動地圖。

我當然可以通過使用滾動覆蓋製作一些替代的東西，或者甚至更好，通過使用媒體查詢來選擇更好的方法來顯示這些菜單。但是，它們不會以這種方式顯示。

簡而言之：我有一個與頁面無關的div，我希望它的高度受頁面高度的限制。這如何工作（不使用JS）？

Answer 1

一種選擇是使用viewport units.

一些簡單的像這應該工作：

.menu-target { 
    max-height: calc(100vh - 100px); /* 100px to match whatever offsets you might need for headers etc */ 
    overflow-y: scroll; 
} 

Example jsfiddle.

Answer 2

如果你是針對現代瀏覽器，你可以使用calc和vh來實現自己的目標。 如果您需要將按鈕放在屏幕中間，只需從max-height的.popup中減去按鈕的位置即可。

.wrapper { 
 
    position: absolute; 
 
    top: 80px; /*the position of your floating button*/ 
 
    right: 50px; 
 
} 
 

 
.button { 
 
    display: block; 
 
    width: 50px; 
 
    padding: 10px; 
 
    float: right; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
} 
 

 
.popup { 
 
    position: absolute; 
 
    max-height: calc(100vh - 50px - 80px); /*modify the value to fit your needs, 80px is the position of your floating button*/ 
 
    overflow-y: scroll; 
 
    width: 100px; 
 
    padding: 10px; 
 
    right: 55px; 
 
    top: 0; 
 
    border: 1px solid blue; 
 
}

<div class="wrapper"> 
 
    <span class="button">Star</span> 
 
    <div class="popup"> 
 
    <p>Option 1</p> 
 
    <p>Option 2</p> 
 
    <p>Option 3</p> 
 
    <p>Option 4</p> 
 
    <p>Option 5</p> 
 
    <p>Option 6</p> 
 
    <p>Option 7</p> 
 
    <p>Option 8</p> 
 
    <p>Option 9</p> 
 
    </div> 
 
</div>