我希望在屏幕的每一侧和底部浮动 3 个工具栏，而 SVG 应该占据其余空间。如何建模？

Posted 2023-03-06

【中文标题】我希望在屏幕的每一侧和底部浮动 3 个工具栏，而 SVG 应该占据其余空间。如何建模？

【英文标题】：I want 3 toolbars floating on each side and bottom of the screen and SVG should take rest of the space. How to model this?

【发布时间】：2017-11-09 03:59:16

【问题描述】：

我想要一个不滚动的全屏页面。该页面应使用 3 个工具栏（屏幕两侧各 2 个，底部工具栏）占据整个屏幕。如何设置 svg 尺寸？请帮忙。

【参考方案1】：

在您的 CSS 中，您可以尝试使用“calc()”。

举个例子：

.my-svg-container 
    height: calc(100vh - 50px - 40px);
    width: calc(100vw - 20px - 10px);

其中：顶部栏 = 50 像素，底部栏 = 40 像素，左侧栏 = 20 像素，右侧栏 = 10 像素

请注意，此方法仅在您知道每个条的尺寸时才有效，否则您可以使用“height: (a number)vh; width: (a number)vw;”其中（一个数字）是一个介于 0 - 100 之间的数字，代表屏幕尺寸的百分比（即 100vh 是 100% 屏幕高度，40vw 是 40% 屏幕宽度）

【讨论】：

我没有使用 calc、vh 或 vw，因为我想支持旧版浏览器。所以我用javascript进行了计算。非常感谢您的快速回答并给了我解决它的想法。 :)