材料设计菜单

Question

我正在探讨材料设计概念(目前正在使用googles MDL)来构建一个应用程序，实际上只在桌面上使用。我想知道在屏幕底部有一个持久工具栏的合适方法是什么。这个工具栏不是完整的，并且是上下文敏感的，因此实际上会根据所选内容的不同而改变长度。真的，我想知道最好的容器和最佳的方法来定位它，同时坚持(粗略！)医学博士指导方针..。

以前我会用..。

#toolbar{
    bottom: 10px;
    left: 50%;
    position: fixed;
    transform: translate(-50%, 0);
}

这很好，但我不确定这是总体上最好的方法，还是违反了MD的准则？

我是不是应该把它放到一个网格里(比如说3-6-3 )？或者用一张卡片？

请记住，在工具栏后面会发生一些事情，例如，我希望工具条位于工具栏顶部的全屏图片/webGL模型。

我附了一张图片，粉红色代表工具栏上的图标。灰色背景可能会有一些webgl和图像。周围也会有其他工具栏，但这将是主要使用的工具栏。

​

我希望这是有意义的，我可以在代码中模仿一些东西，但是如果有人能给我一个粗略的方法，我会很感激的。

Answer 1

解决粘性页脚的最好方法是使用CSS calc函数。我还建议将工具栏更改为柔性盒，因为它可以说是子项更改的最动态容器。

#toolbar {
    display: flex;
    min-height: clac(100vh - 50px);
}