Material 设计菜单

Question

我正在尝试 material 设计概念（目前使用 googles MDL）来构建一个应用程序，实际上只在桌面上使用。我想知道在屏幕底部设置持久工具栏的适当方法是什么。此工具栏不是全长的，并且是上下文相关的，因此实际上会根据所选内容改变长度。真的，我想知道最好的容器和放置它的最佳方法，同时（大致！）遵守 MD 指南...

以前我会使用..

将其设置到位

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

这很好，但我不确定这是否是一般的最佳方法或是否违反了 MD

我应该将它放入网格中（比如 3-6-3 列）吗？或者也许使用卡？

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

之上

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

我希望这是有道理的，我可以在代码中模拟一些东西，但如果有人能给我一个大致的方法，我将不胜感激。

Answer 1

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

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

Material 设计菜单

Material Design Menus

css

material-design

material-design-lite