2017-08-13 90 views
-1

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

我有一個名爲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> 

截圖當前的問題:

enter image description here

+0

由於寬度和高度的計算是用JavaScript實現,也許你可以跟我們分享代碼的相應部分。 – louisfischer

回答

0

你沒有張貼任何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>