兩個HTML div的定位

Question

我目前在定位HTML元素時遇到了一些麻煩。

我有一個名爲game一個div ID和其他一個叫belowGame，我需要的game格始終保持在屏幕的頂部和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：

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