材料设计菜单

Question

我正在考虑使用材料设计概念（目前使用谷歌MDL）来构建应用程序，实际上只在桌面上使用。我想知道在屏幕底部有一个持久工具栏的适当方法是什么。此工具栏不是全长的，并且将对上下文敏感，因此实际上将根据所选内容而改变长度。真的，我想知道最好的容器和最好的方法来定位它，同时坚持（大致！）MD指南......

之前我会使用..

将其设置为位置

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

这很好，但我不确定这是一般的最佳方法还是违反MD指南

我应该将它放入网格（比如3-6-3 col）吗？或者可以使用卡片？

请记住工具栏后面会有一些事情发生，例如：全屏图片/ webGL模型，我希望工具栏位于

之上

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

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

Answer 1

粘性页脚的最佳方法是使用CSS calc函数。我还建议将工具栏更改为flexbox，因为它可以说是儿童项目更改的最动态容器。

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