Question

编辑2016/04/19：

这是网站：http://gbgteambuilder.byethost7.com/

ORIGINAL：

我有一个简单的网站，其中包含一些表格元素（在#playerTable中），点击后，其包含的文字会作为<h3>元素添加到表格的#playerPool div中39; s左。添加文本后，#playerPool似乎向下移动大约一厘米，露出包含div的背景颜色#interfaceContainer。

我一直试图实现的目标是让两个div彼此并排，#playerPoolContainer和#playerRoster占据#interfaceContainer的整个高度。现在它们具有不同的高度，#playerRoster仅向#playerPool容器的方式下降约2/3。这个，以及添加<h3>标记时的这种奇怪的行为，我不确定是什么导致了这一点。

＆＃13;

 body,
 html {
   height: 100%;
 }
 div.main {
   height: 100%;
 }
 body {} #interfaceContainer {
   position: relative;
   width: 100%;
   height: 100%;
   background: green;
 }
 #playerPoolContainer {
   position: relative;
   float: left;
   width: 55%;
   height: 100%;
 }
 #playerPool {
   position: relative;
   background: blue;
   width: 100%;
   height: fill;
   float: top;
 }
 #playerRoster {
   vertical-align: top;
   background: black;
   overflow: auto;
   padding: 8px;
   color: white;
 }
 #playerRoster form {
   float: right;
 }
 #playerRoster input,
 #playerRoster p,
 #playerRoster button {
   margin: 4px;
 }
 #output {
   float: top;
   height: 240px;
   background: black;
   bottom: 0;
   width: 100%;
 }
 .player {
   background: black;
   color: white;
   width: auto;
 }
 #playerTable {
   width: 100%;
   border: 1;
   table-layout: fixed;
 }
 #playerTable td {
   width: 25%;
 }
 .selectedPlayer {
   background: yellow;
   color: black;
 }
 h3 {
   color: white;
   text-align: center;
 }

＆＃13;

<!doctype html>
<html>

<head>
  <script src="resources/MochiKit/Base.js"></script>
  <script src="resources/MochiKit/Iter.js"></script>
  <script src="resources/MochiKit/DOM.js"></script>
  <script src="resources/MochiKit/Style.js"></script>
  <script src="resources/jquery-1.12.2.js"></script>

  <script src="js/dbhelper.js"></script>
  <script src="js/init.js"></script>
  <script src="resources/utility.js"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <style>
    a.test {
      font-weight: bold;
    }
  </style>
  <meta charset="utf-8">
  <title>Demo</title>
</head>

<body>
  <div id="interfaceContainer">
    <div class="main" id="playerPoolContainer">
      <div id="output">
      </div>
      <div class="main" id="playerPool">
      </div>
    </div>

    <div class="main" id="playerRoster">
      <form id=addPlayerForm action="server/db/dbInsert.php" method="get">
        <p>Add new player:</p>
        <input id="addPlayerInput" name="data" />
        <br />
        <input type="submit" value="Submit" id="submitPlayer">
      </form>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

我对样式表及其工作进行了一些更改。

body,
 html {
   height: 100%;
   width: 100%;
   margin: 0px;
 }
 div.main {
   height: 100%;
 }
 body {} #interfaceContainer {
   height: 100%;
   width: 100%;
   background: green;
   margin: 0px;
 }
 #playerPoolContainer {
   position: fixed;
   float: left;
   width: 55%;
   height: 100%;
 }
 #playerPool {
   position: relative;
   background: blue;
   width: 100%;
   height: calc(100%-240px);
   display: block;
   float: left;
   vertical-align: top;
   border-collapse: collapse;
   margin: 0px;
 }
 #playerRoster {
   float: none;  
   vertical-align: top;
   margin: 0px;
   background: black;
   overflow: hidden;
   padding: 0px;
   color: white;
   width: calc(100%-55%);
   height: 100%;
   //display: block;
 }
 #playerRoster form {
   float: right;
   width: auto;
   height: auto;
 }
 #playerRoster input,
 #playerRoster p,
 #playerRoster button {
   margin: 4px;
 }
 #output {
   float: top;
   height: 240px;
   background: black;
   bottom: 0;
   padding: 0px;
   width: 100%;
   position: relative;
   margin: 0px;
 }
 .player {
   background: black;
   color: white;
   width: auto;
 }
 #playerTable {
   width: 100%;
   border: 1;
   table-layout: fixed;
 }
 #playerTable td {
   width: 25%;
 }
 .selectedPlayer {
   background: yellow;
   color: black;
 }
 h3 {
   color: white;
   text-align: center;
 }

您可以看到演示here on jsfiddle

向div添加文本会导致div在其父容器中向下移动，从而产生间隙

1 个答案: