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

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

如果您的目标是现代浏览器，您可以使用calc 和vh 来实现您的目标。 如果需要将按钮放置在屏幕中间，只需将.popup的max-height减去按钮的位置即可。

.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>

Answer 2

一种选择是使用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.