两个 HTML div 的定位答案

【问题标题】：Positioning of two HTML divs两个 HTML div 的定位
【发布时间】：2017-08-13 20:36:26
【问题描述】：

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

我有一个名为 game 的 div id 和另一个名为 belowGame 的 div，我需要 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>

当前问题的截图：

【问题讨论】：

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

标签： javascript html css positioning

【解决方案1】：

您没有发布任何 CSS。

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

* { box-sizing: border-box; margin:0; padding:0; }

#gameDiv {
 height: 100vh;
 display: flex;
 flex-flow: column nowrap;
}

#game,
#belowGamge { flex: 1 0 auto; }

#game { border: 1px solid #000; }
#belowGame { background: yellow; }

<div id="gameDiv">
    <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>

【讨论】：