语义 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