php echoed Elemente nicht Höhe ändern

Question

Ich benutze ein PHP-Skript, um ein Verzeichnis zu lesen und laden Sie alle Bilder in eine Galerie, in der <div id="content"> Tag Ich habe eine Funktion <?php create_gallery("path"); ?>, die alle Bilder lädt.

Das Problem ist danach die <div> Höhe wird nicht geändert, auch wenn die Körperhöhe korrekt ist und alle Bilder angezeigt wird, wird das Div nicht angezeigt. Wenn es ein transparentes Div wäre, wäre es kein Problem, aber es hat einen Hintergrund, der nur etwa 83px ist, von der ersten Spanne sollte die Höhe des div einige 1000 px Höhe sein, die gleiche Höhe, die die Bilder einnehmen.

PHP-Funktion:

function create_gallery($path){ 
    $things = scandir($path); 
    echo "<span><h1>Artwork Test</h1></span>"; 
    $imgs = img_arr($path); //only returns images 
    for ($i=0; $i<count($imgs); $i++) { 
     echo "<div class='art_img_div' onclick='gallery_open_full(this)'><img class='art_img_img' src=" . $imgs[$i] . " /><div class='art_img_div_div'></div></div>"; 
    } 
    } 

css:

#content { 
    width: 75%; 
    margin: 0px auto; 
    padding-bottom: 3px; 
    border-left: 1px groove rgba(0, 0, 0, 0.25); 
    border-right: 1px groove rgba(0, 0, 0, 0.25); 
    box-shadow: 2px 0px 2px 4px rgba(0, 0, 0, 0.125); 
    padding: 112px 12px 12px 12px; 
    margin-bottom: 36px; 
} 

.art_img_div { 
    height: 300px; 
    margin: 8px; 
    cursor: pointer; 
    position: relative; 
    float: left; 
    clear: none; 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
} 

.art_img_img { 
    height: 100%; 
    flex: none; 
} 

Ich habe versucht, eine Javascript-Funktion auszuführen, die die Höhe des div auf den document.body.heightoffSet ohne Erfolg als seine Rückkehr in dem falschen Wert basierend neu berechnet .

Answer 1

Nach dem Erstellen eines schnellen Projekts habe ich Ihr Problem verstanden. Korrigiere mich, wenn ich falsch liege.
Der Container aus #content wickelt nicht die gesamten Bilder ein. Das Problem hier ist, dass Sie einen

auf dem Bildcontainer verwenden. Ursache dafür ist, dass es aus dem Seitenfluss entfernt wird (und das Elternelement nicht vollständig um sie herum gewickelt ist). Einfache Lösung ist es, ein

#content:after { 
    content: "."; 
    clear: both; 
    display: block; 
    visibility: hidden; 
    height: 0; 
} 

Sie übrigens bei #content ein padding-bottom muss hinzufügen, die sofort durch die Polsterung Attribut überschrieben wird.
PS: Eine jsfiddle würde beim nächsten Mal helfen :)