javascript - 语义 UI 边栏，部分高度

Question

全部!

我写这篇文章是因为我试图弄清楚我将如何处理以下内容:

我想编写一个应用程序(特别是 Electron + Vue)，它使用窗口左侧的语义 UI 侧边栏提供导航和其他功能。

问题是，我只想让侧边栏占窗口高度的 75-80%，底部的 20-25% 是一个静态框(我正在为 Steam 游戏开发一个小型开发工具，因此此框将包含有关语义菜单上所选节点的信息)。

我附上了一张(画得很糟糕的)图片作为我希望完成的示例:

无论如何，我不确定该怎么做，因为我真的不知道如何限制 Sidebar 组件的高度(我将使用 Semantic 的 Vue 组件版本，而不是仅仅使用他们的 CSS)

如有任何帮助，我们将不胜感激。

我想也许这可以通过类似 Flex 的东西实现，但我不知道。

还可以选择完全不使用实际的边栏组件，而只为该元素做一些支持 Flex 的布局。

提前致谢!

Answer 1

这对于像 Flex 这样的东西来说是完美的。您基本上可以有一个包含两个容器的容器。将父级设置为垂直对齐它们并跨越您想要的宽度。示例:

body {
  margin: 0;
}

.left-nav {
  width: 300px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.upper {
  width: 100%;
  height: 100%;
  background-color: red;
}

.lower {
  width: 100%;
  height: 40%;
  background-color: blue;
}

这是一支可以帮助您入门的笔:https://codepen.io/potatogopher/pen/WZGBxZ