将绝对 div 高度设置为剩余浏览器高度

Question

我有一个 div （绝对容器），它绝对定位到静态定位的父级。我的目标是使绝对容器具有设置浏览器的高度，最大高度约为600px。它当前的起始位置是〜页面中间，我希望它将其扩展到浏览器页面的底部，并且如果浏览器大小更新，高度会动态变化。也有可能 overflow-scroll-container 仅包含 3-4 个选项，并且在这种情况下 div 高度不应延伸到浏览器底部。

.parent {
    position: static;
}

.absolute-container {
    display: block;
    position: absolute;
    z-index: 121;
    background-color: #FFF;
    width: 90vw;
}

.overflow-scroll-container {
    overflow-y: scroll;
    padding: 4px 8px;
}

.content-footer {
    margin: 8px 0;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #BECAD6;
}



<div class='parent'>
   <button>Example Dropdown</button>
   <div class='absolute-container'>
      <div class='overflow-scroll-container'>
        <button>Button 1</button>
        <button>Button 2</button>
        <button>Button 3</button>
        <button>Button 4</button>
        <button>Button 5</button>
        <button>Button 6</button>
        <button>Button 7</button>
        <button>Button 8</button>
      </div>
      <div class='content-footer'>
        <button>Reset</button>
        <button>Done</button>
      </div>
   </div>
</div>

Answer 1

您的问题有很多障碍需要克服。您需要使用 JavaScript 来获取为您设置容器高度的函数中的 screen.height。每次调整浏览器大小以及第一次显示页面时，您都需要触发此函数。您还需要知道绝对定位容器的顶部 Y 值。然后，您可以从绝对定位的 Y 顶部值中减去总 window.height，以获得该菜单容器的高度。但是，您可能希望为该值设置最大高度，并将高度设置为 100%（或适当使用 flex-shrink）以满足菜单选项下方没有任何空白的要求。如果您将问题分解为各个部分，可能会更容易找到帮助。

以下是一些有用的链接，可帮助解决这些问题：
JavaScript 中的窗口、屏幕和文档有什么区别？
调整窗口大小时调用函数
检索 HTML 元素相对于浏览器窗口的位置 (X,Y)
如何强制 DIV 块延伸到页面底部，即使它没有内容？

Answer 2

根据您的屏幕截图，如果这是您想要实现的目标，我不会这样做。显然，我不知道所有规格，但我确信会有更好的方法来做到这一点，甚至使用库、插件或类似的东西。

现在，根据我的理解，我做了这个： https://codepen.io/yofisim/pen/abwLrLK

我在JS中根据视口高度设置

height

的

absolute-container

。 (

vh

) 我正在检查我有多少个按钮，并据此设置

absolute-container

的高度。此外，我在

EventListener

上添加了

resize

，以确保当我调整窗口大小时，如果列表有超过 4 个按钮，该元素将最大为 600px 或总视口高度。

Answer 3

“我的目标是使绝对容器具有设置浏览器的高度，最大高度〜600px。它当前的起始位置是〜页面中间并且我希望它将其扩展到浏览器页面底部，并且如果浏览器尺寸更新，高度也会动态变化。”

随机文档引用：“测量 vh 等于视口高度的 1/100”

建议：高度：clamp(50vh, 75vh, 600px)； 例如...您可以将其设为 25、50、600 像素。您还可以尝试在 CSS 中使用 calc()，它可以做一些非常酷的事情。 我使用 VH/VW 设备没有任何问题，而且它们比为每个现有设备使用 9999 屏幕预设要舒服得多，而且由于它们大部分时间都在工作，所以这是最简单的解决方案...

问题没有说明 JS 的用法，渲染 HTML 也没有真正需要 JS。使用 VH/VW，您可以根据需要缩放浏览器，并且元素会自动调整大小...