Collasing float gallery

Question

Meine Galerie-Seite erlaubt es mir nicht, eine Fußzeile am Ende der Seite hinzuzufügen oder leeren Platz zu schaffen.

Ich bin mit border-Box: Box-Sizing UND selbstlöschend schwimmt. Ich habe auch versucht, ein leeres div mit einem clearfix zu erstellen.

/* self-clearing floats*/ 
 
.work:after, 
 
.section:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.work { 
 
    height: 550px; 
 
    margin-bottom: 40px; 
 
} 
 
.work .col { 
 
    float: left; 
 
    width: 49%; 
 
    height: 100%; 
 
} 
 
.work .col:first-child { 
 
    margin-right: 2%; 
 
} 
 
.work .col > div { 
 
    top: 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin-bottom: 4%; 
 
    text-align: center; 
 
    display: block; 
 
} 
 
.work .col > .lrg { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.work .col > .sm { 
 
    margin-right: 4%; 
 
    float: left; 
 
    width: 48%; 
 
    height: 48% 
 
} 
 
.work .col > .sm.last { 
 
    margin-right: 0; 
 
} 
 
.work img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
.footer { 
 
    height: 100px; 
 
    clear: both; 
 
}

<section class="work"> 
 
    <div class="col"> 
 
    <div class="lrg"> 
 
     <img src="./gnomes14.jpg" /> 
 
    </div> 
 
    <div class="sm"> 
 
     <img src="./gnomes2.jpg" /> 
 
    </div> 
 
    <div class="sm last"> 
 
     <img src="./gnomes3.jpg" /> 
 
    </div> 
 
    </div> 
 
    <!-- end.col--> 
 
    <div class="col"> 
 
    <div class="sm"> 
 
     <img src="./gnomes10.jpg" /> 
 
    </div> 
 
    <div class="sm last"> 
 
     <img src="./gnomes11.jpg" /> 
 
    </div> 
 
    <div class="lrg"> 
 
     <img src="./gnomes8.jpg" /> 
 
    </div> 
 
    </div> 
 
    <!-- end.col--> 
 
</section> 
 
<div class="footer"> 
 
    <p>help</p> 
 
</div>

Answer 1

dieses Problem geschah, weil Abschnitt die Klasse „Arbeit“ hat, hat 550px für seine Höhe, aber seine Kinder mehr als 550px Höhe hat.

jetzt footer tag ist unter Abschnitt tag und kinder der abschnitt ist vorbei und sie können nicht fuß sehen.

löschen Sie Kinder von section.work und legen Hintergrund für diese und Fußzeile und sehen Sie diese Tags und danach neue Tags auf section.work zum Verhindern dieser Probleme.