CSS within Electron: 只允许在特定方向溢出

Question

我正在尝试创建一个 tool/navbar，它不会移动，内容会填满屏幕的其余部分，但不会溢出到工具栏（这是当前行为）。所以内容 class 应该只允许堆栈向下溢出（根本没有双关语）。 Google 对描述问题所必需的关键字感到困惑。最后我还想添加一个弹出式侧边栏菜单，但我想这只是将所有当前代码包含在 div 中并在单击侧边栏按钮时滑动它的问题。这是代码：

.container{
height: 95vh;
width: 100vw;
max-width: 100%;
display:flex;
flex-direction: column;
justify-content:center;
align-items: center;
margin: 0px;}

.content {
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex-grow: 1;
  }

 .toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
flex-shrink: 0;
display: flex;
align-items: center;
background-color:maroon;

}

这是html：

<div class="toolbar" role="banner">
<img src='sidebar_button.jpg'>
<span>Home</span>
</div>
  <div class="container">

  <div class="content">
    <!-- Resources -->
</div>
</div>

Answer 1

只要我正确理解您的要求 - header 滚动时不会移动，其下方的内容会滚动但不会出现在 top-bar 上方 - 解决方案很简单。

真的，你只需要给你的top-bar一个position: fixed。这可以防止它滚动并创建一个新的“堆叠上下文”，这意味着它默认显示在其他所有内容之上。我创建了一个小演示来展示下面的内容。

body {
  height: 200vh;
  margin: 0;
  font-family: "Segoe UI Variable Text", system-ui, ui-rounded, sans-serif;
}
.topbar {
  background-color: #8CB0C8;
  position: fixed;
  width: 100vw;
  height: 64px;
  top: 0;
  left: 0;
  display: grid;
  align-content: center;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.16);
}
h1 {
  margin: 0;
  font-family: "Segoe UI Variable Display", system-ui, ui-rounded, sans-serif;
  font-weight: 500;
}
.content {
  width: 100%;
  max-width: 1080px;
  margin: 72px auto 0;
}

<div class="topbar">
  <h1 class="icon"></h1>
</div>
<div class="content">
  <h1>This is your content</h1>
  <p>This is a whole lot of content...</p>
</div>

CSS within Electron: 只允许在特定方向溢出

CSS within Electron: Only allow overflow in specific direction

html

css

flexbox

electron