Css 材料设计菜单

我正在涉猎材料设计概念（目前使用谷歌MDL）来构建一个应用程序，实际上只在台式机上使用。我想知道在屏幕底部使用持久工具栏的合适方法是什么。此工具栏不是全长，并且与上下文相关，因此其长度实际上会根据所选内容而变化。真的，我想知道最好的容器和最好的方法来定位它，同时坚持（大致！）的MD准则

以前，我会使用..将其样式化到适当的位置

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

这很好，但我不确定这是总体上最好的方法还是违反了MD的指导方针

我应该把它放进一个网格（比如3-6-3列）吗？或者用一张卡片

请记住，工具栏后面会有一些东西，例如全屏图片/webGL模型，我希望工具栏放在它们上面

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

---

我希望这是有意义的，我可以用代码模拟一些东西，但是如果有人能给我一个大概的方法，我将不胜感激。

处理粘性页脚的最佳方法是使用CSS

calc

函数。我还建议将工具栏更改为flexbox，因为它可以说是子项更改的最具动态性的容器

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

---

非常感谢您的回复。这将如何定位在屏幕底部和中央呢？我会将它与问题中提到的原始代码结合使用吗？我是否遗漏了一些明显的东西？哦，为了其他人的利益，如果他们只是试图复制和过去，你拼错了calc。ThanksIt应该替换原始代码。CSS技巧有一个很棒的flexbox指南，可以帮助您更好地理解felxbox的属性。如果希望flexbox位于页面中心，请使用

justify content:center属性值。