Question

假设您有一个下拉列表，其中包含大量溢出页面高度的选项。我知道我可以使用$client = new Amp\Artax\DefaultClient; $promises = []; foreach ($urls as $url) { $promises[$url] = Amp\call(function () use ($client, $url) { // "yield" inside a coroutine awaits the resolution of the promise // returned from Client::request(). The generator is then continued. $response = yield $client->request($url); // Same for the body here. Yielding an Amp\ByteStream\Message // buffers the entire message. $body = yield $response->getBody(); return $body; }); } $responses = Amp\Promise\wait(Amp\Promise\all($promises));进行滚动，但前提是我设置overflow: auto。如何设置最大高度以确保元素不会溢出浏览器窗口？

Like in this image

左边是现在的样子。下拉页面溢出。它应该是正确的 - 下拉列表调整为页面高度以下的高度。

我已尝试将max-height设置为不同的值，例如max-height，因为下拉列表大约是页面的一半，但这需要适合所有类型的屏幕尺寸，因此不够灵活。< / p>

在这种情况下首选CSS解决方案。

Answer 1

您可以计算下拉列表与页面底部之间的当前距离（https://stackoverflow.com/a/7656176/5370933），并使用此值追加样式。

.myDropdown {
  max-height: myDistance;
  overflow: scroll
}

我觉得这样的事情可行。但是你必须使用一些JS来动态获取距离（取决于用户屏幕和/或用户在下拉开始前滚动...）

Answer 2

如果我理解了网页的布局，那么下拉列表就是页面中的最后一个元素（也许是）。

您可以做的是，首先，将此行添加到您的主页容器：

#page {
  min-height: 100vh; /* Or the value you like most */
}

现在我们可以访问文档的完整高度。

接下来，您只需使用flexbox的space-between或space-around值即可将下拉列表保留在页面底部（如页脚）。

但现在，您需要在页面末尾和下拉列表之间留出一点空间。只需添加margin-bottom及其完成。

现在请注意，我知道下拉列表下方可能存在页脚或内容。您可以在任何容器中实现此解决方案。

这不是一个无错误的解决方案，但它并不需要javascript。

这是一个有效的例子。

＆＃13;

function _test_add(){
  document.getElementById("dropdown").innerHTML += "<li>Item</li>";
}

＆＃13;

#page {
  min-height:100vh;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

#addbtn {
  margin:0 auto;
}


/*
 * Fictif Content
 */
#main-content {
  height: 50vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:gray;
}

#dropdown {
  min-height: 8em;
  max-height: 18em;
  background-color:#f1f1f1;
  padding: 0;
  list-style-type: none;
  overflow: auto;
  margin-bottom:4em;
  border: solid black 2px;
}

#dropdown li {
  padding:1em;
}

#dropdown li:nth-child(odd) {
  background-color: #fafafa;
}

＆＃13;

<div id="page">
    <div id="main-content">
        Main Content
    </div>
    
    <button id="addbtn" onclick="_test_add()">[TEST] Add items in dropdown</button>
    
    <ul id="dropdown">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

＆＃13;

为下拉列表设置页面高度的最大高度

2 个答案: