语义 UI 侧边栏，部分高度

Question

所有！

我写信是因为我想弄清楚我将如何处理以下内容：

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

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

我附上了一张（画得非常糟糕）的图片作为我希望完成的示例：

无论如何，我不确定该怎么做，因为我真的不知道如何限制 Sidebar 组件的高度（我将使用 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

语义 UI 侧边栏，部分高度

Semantic UI Sidebar, partial height

javascript

css

flexbox

semantic-ui

vue.js