Autodesk forge 查看器初始大小是窗口而不是 div答案

【问题标题】：Autodesk forge viewer initial size is window not the divAutodesk forge 查看器初始大小是窗口而不是 div
【发布时间】：2019-05-20 02:44:52
【问题描述】：

我正在使用这个代码在页面加载时使用 forge headless 查看器来初始化它

Autodesk.Viewing.Initializer(options, function onInitialized(){
    viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
    //viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
    viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Viewer3D);
    viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});

它在下面的 html 代码中被移动到 div 中

<div style="width:80%; float:right; ">
    <div id="MyViewerDiv" style="background-color: #0f0; width:600px; display:inline-block; ">A</div>
</div>
<div style="background-color: #eee; min-height: 60px; width:600px; ">
    <button id="MyPrevButton" class="MyNavButton">Previous</button>
    <button id="MyNextButton" class="MyNavButton">Next</button> 
</div>
<div id="lijst" style="background-color: #ddd; width:20%; float:left;"></div>

理想情况下，我希望 id="lijst" 的 div 位于查看器的右侧，但我遇到了一个我无法找到解决方案的问题。

在初始化期间计算查看器画布的大小，并将其设置为整个窗口的大小，而不是 div id="MyViewerDiv" 的大小

这是可以理解的，因为在创建查看器画布之前，html 解析器无法计算 div 的大小（在创建此画布之前它仍然是空的）。

结果是查看器超出了窗口的大小。浏览器会创建一个滚动条，如果您一直滚动到右侧，额外的菜单就会完全滚动到屏幕左侧。实际上，div 的大小已设置为 100% 而不是 80%。

同样的情况也发生了。带有两个按钮的 div 被放置在窗口的顶部，即使它被放置在带有查看器画布的 div 下方（这又是有道理的，因为当布局引擎计算位置时，查看器 div 仍然是空的并且高度为0)

如何在创建查看器画布后调整其大小以使整个显示器适合屏幕而不需要滚动条（并允许更响应式的 UI）？

【问题讨论】：

标签： javascript html autodesk-forge autodesk-viewer

【解决方案1】：

可能有更多方法可以解决这个问题，但您可能需要考虑使用position: absolute，例如：

CSS：

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

#viewer {
    position: absolute;
    width: 80%;
    height: 100%;
}

#sidebar {
    position: absolute;
    right: 0;
    width: 20%;
    height: 100%;
}

HTML：

<body>
    <div id="viewer"></div>
    <div id="sidebar"></div>
</body>

【讨论】：