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

Question

我有一个绝对定位到静态定位父级的 div (absolute-container)。我的目标是让绝对容器具有设置浏览器的高度，最大高度约为 600 像素。它的当前起始位置是〜页面中间，我希望它将它扩展到浏览器页面的底部，并在浏览器大小更新时动态改变高度。 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）以满足您的要求，即菜单选项下方没有任何空白。如果您将问题分解为各个部分，可能会更容易找到帮助。

这里有一些有用的链接可以帮助解决这些问题：
What is the difference between window, screen, and document in JavaScript?
Call a function when window is resized
Retrieve the position (X,Y) of an HTML element relative to the browser window
How do I force a DIV block to extend to the bottom of a page even if it has no content?

Answer 2

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

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

我根据视口高度在 JS 中设置 height 的 height。 (vh) 我正在检查我有多少个按钮，并据此设置absolute-container 的高度。此外，我在resize 上添加了一个EventListener，以确保当我调整窗口大小时，如果列表有超过 4 个按钮，则元素将最大为 600 像素或总视口高度。

我希望这能解决您的问题。

Answer 3

编辑：因为版主不懂

“我的目标是让绝对容器有一个设置浏览器的高度，最大高度~600px。它的当前起始位置是~页面中间 我希望将其扩展到浏览器页面的底部，并在浏览器大小更新时动态更改高度。”

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

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

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