材料设计菜单

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);
}