Javascript 两个HTML div的定位

我目前在定位HTML元素时遇到一些问题

我有一个名为

game

的div id和另一个名为

belowGame

的div id，我需要

game

div始终位于屏幕顶部，而

belowGame

div始终位于底部

旁注：大多数宽度和高度计算都是在JavaScript中完成的，因为它是一个Node.js Socket.IO应用程序

当前代码如下所示：

<div id="gameDiv" style="display:none;">
    <div id="game">
        <canvas id="ctx" style="position:absolute;"></canvas>
        <canvas id="ctxUi" style="position:absolute;"></canvas>
        <div id="ui" style="position:absolute; width: 100%; height: calc(100% - 125px);"></div>
    </div>

    <div id="belowGame" style="position: relative;">
        <div id="chat-text">
            <div>Welcome to the chat!</div>
        </div>

        <form id="chat-form">
            <input type="text" id="chat-input">
        </form>
    </div>
</div>

欢迎来到聊天室！

当前问题的屏幕截图：

<div id="gameDiv" style="display:none;">
    <div id="game">
        <canvas id="ctx" style="position:absolute;"></canvas>
        <canvas id="ctxUi" style="position:absolute;"></canvas>
        <div id="ui" style="position:absolute; width: 100%; height: calc(100% - 125px);"></div>
    </div>

    <div id="belowGame" style="position: relative;">
        <div id="chat-text">
            <div>Welcome to the chat!</div>
        </div>

        <form id="chat-form">
            <input type="text" id="chat-input">
        </form>
    </div>
</div>

---

您没有发布任何CSS

和往常一样，有几种方法可以实现你想要的。其中之一是flexbox：

*{框大小：边框框；边距：0；填充：0；}
#加梅迪夫{
高度：100vh；
显示器：flex；
柔性流动：柱状nowrap；
}
#游戏，
#地下档案{flex:10 auto；}
#游戏{边界：1px固体#000；}
#地下名称{背景：黄色；}

欢迎来到聊天室！

由于宽度和高度的计算是用JavaScript完成的，也许您可以与我们共享相应的代码部分。