两个HTML div的定位

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

截图当前的问题：

来源

2017-08-13 dane

由于宽度和高度的计算是用JavaScript实现，也许你可以跟我们分享代码的相应部分。 – louisfischer

你没有张贴任何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>

来源

2017-08-13 10:37:54 Adam

两个HTML div的定位

回答

相关问题