语义UI边栏，部分高度

Question

所有！

我写作是因为我试图弄清楚我是如何做到的：

我想编写一个应用程序（Electron + Vue，特别是），它使用窗口左侧的语义UI侧边栏提供导航和内容。

问题是，我希望只有侧边栏大约是窗户高度的75-80％，底部20-25％是一个静态的盒子（我工作的很小）用于Steam游戏的开发工具，因此此框将包含有关语义菜单上所选节点的信息。）

我附上一张（画得非常糟糕）的图片，作为我希望实现的一个例子：

无论如何，我不知道该怎么做，因为我真的不知道如何限制补充工具栏组件的高度（我要去使用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