Hinzufügen von Text zu einem div verursacht div darin nach unten zu bewegen ist Behälter Eltern eine Lücke

EDIT 2016.04.19 machen:Hinzufügen von Text zu einem div verursacht div darin nach unten zu bewegen ist Behälter Eltern eine Lücke

Dies ist die Website: http://gbgteambuilder.byethost7.com/

ORIGINAL:

ich habe einfache Site, die einige Tabellenelemente (in #playerTable) hat, die, wenn sie geklickt werden, ihr enthaltender Text als <h3> Element zu dem #playerPool div zu der Tabelle links hinzugefügt werden. Wenn der Text jedoch hinzugefügt wird, scheint sich die #playerPool um etwa einen Zentimeter nach unten zu bewegen, wodurch die Hintergrundfarbe des enthaltenen div, #interfaceContainer, freigelegt wird.

Was ich versucht habe zu erreichen haben zwei divs nebeneinander, #playerPoolContainer und #playerRoster, die über die gesamte Höhe des #interfaceContainer aufzunehmen. Gerade jetzt haben sie unterschiedliche Höhen, die #playerRoster geht nur etwa 2/3 so weit wie #playerPool Container. Das und dieses seltsame Verhalten, wenn ein <h3> Tag hinzugefügt wird, bin ich nicht sicher, was das verursacht.

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>

Quelle

2016-04-15 Jpaji Rajnish

Ich habe einige Änderungen an Ihrem Sheet und seine Arbeits gemacht.

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

können Sie die Demo sehen here on jsfiddle

Quelle

2016-04-16 13:55:59

Es funktioniert nicht. Ich habe die Seite zu meiner Frage hinzugefügt, wenn Sie einen Blick darauf werfen möchten. –

Ich verstehe es nicht. Es funktioniert gut auf meinem PC. Hast du den jfiddle Link versucht, den ich zur Verfügung gestellt habe? Bitte geben Sie einen Link zu Ihrer Website an, damit ich sie bearbeiten kann. –

Sie wissen, dass Sie Code auf der tatsächlichen Seite bearbeiten können, richtig? (zumindest in Chrom) –

Hinzufügen von Text zu einem div verursacht div darin nach unten zu bewegen ist Behälter Eltern eine Lücke

Antwort

Verwandte Themen