语义UI侧栏，部分高度

全部！语义UI侧栏，部分高度

我写，因为我试图找出如何我会去了解以下信息：

我想写一个应用程序（电子+ Vue公司，特别是），提供导航和使用语义的东西窗口左侧的UI侧边栏。

事情是，我只想让侧边栏大约占窗口高度的75-80％，底部20-25％是一个静态框（我正在为Steam开发一个小型开发工具游戏，所以此框将包含有关Semantic菜单上选定节点的信息）。

我已经附上（实在太差画）的图片作为我希望实现什么的例子：

无论如何，我不知道如何去了解这一点，因为我真的不知道如何去限制边栏组件的高度（我将使用Semantic的Vue Component版本，而不是仅仅使用它们的CSS）

任何帮助将会-不胜感激。

我想也许这将是可能的东西像Flex，但我不知道。

还有一个选择，就是根本不使用实际的侧边栏组件，只是为该项目做一些启用了Flex的布局。

在此先感谢！

来源

2017-09-23 MisutoWolf

这对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

来源

2017-09-23 04:58:48

这实际上是相当真棒，我想我应该已经阅读关于Flex多一点。我不确定是否可以在此包含语义UI边栏，但即使我不能，我仍然可以使用Vue中的无序列表和各种事件处理程序手动执行我需要做的操作。谢谢！接受这个答案，请感谢您回复的速度。 :) – MisutoWolf

语义UI侧栏，部分高度

回答

相关问题