如何使导航栏始终停留在屏幕中间的固定位置面板的顶部？

Question

我正在尝试创建一个布局，其中有一个菜单栏、一个位于屏幕中央的悬停面板和一个位于面板顶部的菜单栏。 我找不到一种方法来做到这一点，导致面板的菜单栏既是面板的全宽（而且没有更多宽度），同时也不随面板的内容滚动。

这是（大部分匿名）代码： https ://jsfiddle.net/BringerOfMisfortune/0rk79dw2/20/（如果您将类从 navBarContainer2 更改为 navBarContainer1，您将看到另一个问题）

我在这里有几个相互交织的问题。 我希望我的所有内容都位于屏幕中央的主面板。 这是一个嵌套的 div，如下所示：

<div>menu bar</div>
<div>
(the panel)
<div>menu bar</div>
<div>content area</div>
(still the panel)
</div>

理想情况下，我希望内容区域滚动，但菜单栏和包含的“面板”div 固定在它们的位置。 为此，我将菜单栏和面板设置为position: fixed ，并且面板区域被限制在屏幕所有边的 10%。

第一个问题始于这样一个事实，即我似乎无法找到内容区域实际可以滚动的方式。

如果我将scroll: auto移出面板的 CSS 并移到内容区域的 CSS 中，它现在不仅根本不滚动，而且文本会超出所述面板的底部！ 这太糟糕了，不是我想要的。 我不确定为什么会发生这种情况，因为可以使面板滚动，但不能滚动面板 div 内的 div。

所以，我需要一种方法来使菜单栏保持在屏幕顶部和面板顶部，即使整个面板正在滚动（因为我无法滚动它的子部分，根据上述问题）。 我使用了position: fixed但会干扰面板上内部菜单栏的宽度。 请注意，它伸出屏幕右侧。 我认为这是因为它正确地偏移到面板的左墙，但由于某种原因仍在使用窗口的宽度。 也许我可以使用手动调整的百分比，但我不确定在调整窗口大小或进行未来更改时会中断什么。

但是，如果我使用固定以外的任何东西（以避免损坏的菜单栏在屏幕右侧无限延伸），它会随着文本滚动，这是我试图避免的问题！

因此，我需要两件事之一：

1. 一种使内容区域内的文本（当然还有其他元素）滚动的方法，如果它们不能在面板不滚动时同时全部放入面板内
2. 一种使面板的菜单栏始终停留在滚动面板顶部而不伸出页面侧面的方法

请帮忙？ 我从来没有见过其他人尝试我在这里的东西（或者我的 Google-fu 太糟糕了），所以我很难弄清楚我的选择。

Answer 1

要使元素可滚动，它必须有一个高度 - 否则该元素只会扩展到其中任何内容的高度。

在这种情况下，我们无法知道面板其余部分的确切高度，但我们可以使用 flex 要求为文本提供剩余高度。 将您的文本放入一个 div 中，该 div 可以占用剩余的垂直空间。 我已经给这个 div 一个 textdiv id 并将额外的 CSS 放入 #content 和 #panel 因为我不知道你是否在其他地方使用这些类，但当然你可以在适当的情况下使用类。

所以额外的 CSS 是：

#panel {
  display: flex;
  flex-direction: column;
}
#content {
  display: flex;
  flex-direction: column;
  overflow-y:hidden;
}
#textdiv {
  overflow-y: auto;
}

这是完整的代码段，其中 navBarContainer1 解决了您的其他水平溢出问题。

 :root { --edges: #333; --footer: #fff; --bgd: #777; --button: #333; --button_hover: #111; --button_lit: #33aaff; --selectable: #999; --selectable_hover: #ddd; --accent: #33aaff; --theme_main: #e9f4ff; --theme_second: #ddd; --formcolor: #fff; --inactive: #eee; } body{ background-color: var(--bgd); margin: 0%; padding: 0; } .navBarContainer1{ position: absolute; background-color: var(--button); width: 100%; margin: 0%; padding: 0; } .navBarContainer2{ position: fixed; background-color: var(--button); width: 100%; margin: 0%; padding: 0; } .blockbutton { display: inline; margin: 0%; padding: 0; } button{ border: none; cursor: pointer; color: white; text-align: center; padding: 14px 16px; margin: 0; text-decoration: none; font-size: 16px; transition: all 0.3s ease; } .navButton{ background-color: var(--button); float: none; } .navButton:hover:not(.activeNav) { background-color: var(--button_hover); } .mainButton{ background-color: var(--selectable); border: 1px solid var(--edges); } .mainButton:hover:not(:disabled){ background-color: var(--selectable_hover); } .activeNav { background-color: var(--button_lit); } button:disabled{ background-color: var(--inactive); color: var(--inactive); } .overlay{ position: fixed; top: 10%; left: 10%; right: 10%; bottom: 10%; border-radius: 15px; background-color: var(--theme_main); border: 10px solid var(--edges); overflow: auto; } .mainWindow{ margin-top: 40px; padding: 20px; } .file{ background-color: var(--selectable); width: 99%; border: 1px solid var(--edges); cursor: pointer; color: black; padding: 14px 0px; font-size: 16px; transition: all 0.3s ease; } .file:hover{ background-color: var(--selectable_hover); } .upload_form{ background: var(--formcolor); padding: 0px; border-radius: 5px; border: 1px solid var(--edges); max-width: 600px; margin: 0px auto; text-align: center; } #footer{ position: fixed; bottom: 0; text-align: center; padding: 15px; color: var(--footer); font-size: 16pt; } progress::-webkit-progress-bar { background-color: var(--theme_second); width: 100%; border: 1px solid var(--edges); } progress::-webkit-progress-value { background-color: var(--accent); width: 100%; } progress { background-color: var(--theme_second); width: 100%; border: 1px solid var(--edges); color: var(--accent); } .hidden{ display: none; } #panel { display: flex; flex-direction: column; } #content { display: flex; flex-direction: column; overflow-y:hidden; } #textdiv { overflow-y: auto; }

 <div class="navBarContainer1"> <button class="navButton activeNav" onclick="">A</button> <button class="navButton" onclick="">B</button> <button class="navButton" onclick="">C</button> <button class="navButton" onclick="">D</button> <button class="navButton" style="float:right;" onclick="toggleIssues">E</button> </div> <div id="panel" class="overlay" style="display:flex;flex-direction:column;"> <div class="navBarContainer1"> <button class="info navButton" onclick="">W</button> <button class="info navButton" onclick="">X</button> <button class="info navButton" onclick="">Y</button> <button class="info navButton" onclick="">Z</button> </div> <div id="content" class="mainWindow"> <form class="upload_form"> <h3 id="friendly_prog">Progress: 50%</h3> <progress id="sysprog" max="100" value="50"></progress> <input type="file" class="file" id="file"> <h3 id="status">Status: Reticulating Splines</h3> <button class="mainButton" type="button" id="start" onclick="">Start!</button> </form> <div id="textdiv"> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> </div> </div> </div>

Answer 2

尝试将参数 top 设置为 50vh，如下所示： top:50vh 。 这将设置相对于视口的距离