0
EDITの2016年4月19日を作る親コンテナの原因：DIVにテキストを追加することで下に移動するのdivがギャップ
これはサイトです：http://gbgteambuilder.byethost7.com/
ORIGINAL：
私が持っています（#playerTableの）いくつかのテーブル要素を持つ単純なサイトで、その含まれているテキストをクリックすると、テーブルの左側の#playerPool divに<h3>要素として追加されます。しかし、テキストが追加されると、#playerPoolは約1センチメートル下に移動し、含まれているdivの背景色#interfaceContainerが表示されます。
私が達成しようとしてきたのは、#playerPoolContainerと#playerRosterという2つのdivを横に並べて、全体の高さを#interfaceContainerとすることです。ちょうど彼らは異なった高さを持っています、#playerRosterは#playerPoolコンテナまでのところで2/3くらいしか下がりません。これは、<h3>タグが追加されたときのこの奇妙な振る舞いを原因としています。
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;
}<!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>
を見ることができます。あなたが見たい場合は、私の質問にサイトを追加しました。 –
私は分かりません。私のPC上でその正常に動作します。私が提供したjsfiddleリンクを試しましたか？あなたのサイトにjsfiddleリンクを提供して編集してください。 –
実際のページでコードを編集できることはご存知でしょうか？ （少なくともクロムで） –