Electron 中的 CSS：只允许在特定方向上溢出

Posted 2023-03-22

【中文标题】Electron 中的 CSS：只允许在特定方向上溢出

【英文标题】：CSS within Electron: Only allow overflow in specific direction

【发布时间】：2021-09-29 19:07:42

【问题描述】：

我正在尝试创建一个不会移动的工具/导航栏，并且内容填充了屏幕的其余部分，但不能溢出到工具栏（这是当前行为）。所以内容类应该只允许堆栈向下溢出（根本没有双关语）。谷歌对描述问题所必需的关键字感到困惑。最终我还想添加一个弹出式侧边栏菜单，但我想这只是将所有当前代码包含在一个 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>

【问题讨论】：

我可能误解了你的问题，但你不能给你的内容一个较低的z-index 将它推到顶栏后面，然后给你的顶栏一个position: fixed吗？

【参考方案1】：

如果我正确理解您的要求 - 一个标题在滚动时不会移动，其下方的内容将滚动但不会出现在顶栏上 - 解决方案非常简单。

真的，您只需要给您的顶栏一个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>

【讨论】：

哇，非常感谢卡尔文！所以我指的是当使用 flex 时，它会在调整电子窗口大小时尝试稳定内容。不幸的是，它在工具栏下一直向上移动。我希望它溢出，但不要向上溢出，因为这会使文本难以看到。当我使用 flex 时，滚动条没有出现（我也不想这样，它是一个桌面应用程序）。我希望文本从屏幕底部溢出，而不会被工具栏挡住。

我明白了 - 我会在几分钟内再试一次。

你看过this post吗？

你好！非常感谢。这不是我想要的，但它的方向是正确的，我可以通过限制最小屏幕高度/宽度来模拟这种行为。谢谢！