定位两个HTML div

Question

我目前在定位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>

当前问题的屏幕截图：

Answer 1

你没有发布任何CSS。

与往常一样，有几种方法可以达到你想要的效果。其中一个是flexbox：

＆＃13;

＆＃13;

* { 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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;