用页面底部的距离限制高度

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>