Abschnitt mysteriös Inhalt auf der Seite

Question

Im im Entwickeln meiner Website mit Bootstrap. Ich habe eine Nav-Leiste, einen Bild-Slider, einen Produkt-Bereich und einen über + Fuß-Bereich. Aus irgendeinem Grund drängt mein Produktbereich den About-Bereich auf die Seite und ich kann nicht herausfinden, warum? auch: die schritte haben den richtigen abstand wenn ich den bildschirm verkleinere, das problem scheint nur bei vollem bildschirm da zu sein.

html:

 <!-- Products section --> 
    <section id="products"> 
    <div class="col-sm-3 text-center"> 
     <br> 
     <img src="images/closed-door-with-border-silhouette.png" alt="Doors" /> 
     <br> 
     <h3>Doors</h3> 
     <p>Your choice of facing-veneered, laminated or primed for internal painting, certified fire rating and prepared for your lock fitting.</p> 
     <!-- Content more details button--> 
     <li><a href="#doors" data-toggle="modal">Learn more</a> 
     </li> 
    </div> 
    <div class="col-sm-3 text-center"> 
     <br> 
     <img src="images/closed-doors-with-windows.png" alt="Door sets" /> 
     <br> 
     <h3>Doorsets</h3> 
     <p>Ensure the co-ordination and quality of your interior design specification. Simply select your components and leave the rest to us.</p> 
     <li><a href="#doors" data-toggle="modal">Learn more</a> 
     </li> 
    </div> 
    <div class="col-sm-3 text-center"> 
     <br> 
     <img src="images/locked-padlock.png" alt="Security doors" /> 
     <br> 
     <h3>Security Doors</h3> 
     <p>Guaranteed protection with a line of defence that is the recognised industry leader in timber based security door systems.</p> 
     <!-- Content more details button--> 
     <li><a href="#doors" data-toggle="modal">Learn more</a> 
     </li> 
    </div> 
    <div class="col-sm-3 text-center"> 
     <br> 
     <img src="images/portable-toilet-doors.png" alt="Washroom cubicles" /> 
     <br> 
     <h3>Washroom Cubicles</h3> 
     <p>Choose from an extensive range of colours and sizes available to suit many applications in the construction and leisure industries.</p> 
     <li><a href="#doors" data-toggle="modal">Learn more</a> 
     </li> 
    </div> 
    </section> 

    <!-- About section --> 
    <section id="about"> 

    </section> 

    <!-- Footer --> 
    <footer id="footer" class="navbar-inverse"> 
    <div class="container"> 
     <p class="navbar-text"><a href="#">Terms and Conditions</a> | <a data-toggle="modal"href="#creditations">Creditations</a></p> 
    </div> 
    </footer> 

css:

li { 
    list-style-type: none; } 

section { 
    min-height: 500px; } 

h1 { 
    font-size: 25px; } 

u { 
    border-bottom: 1px dotted #000; 
    text-decoration: none; } 

footer p { 
    position: absolute; } 

#logo { 
    height: 60px; 
    width: 140px; 
    position: relative; 
    bottom: 20px; 
    right: 10px; 
    padding-left: 20px; } 

.nav { 
    padding-left: 6px; } 

.navbar-right { 
    padding-right: 30px; } 

.navbar-header { 
    padding-right: 20px; } 

#footer { 
    min-height: 0px; 
    line-height: 25px; 
    height: 50px; 
    padding-top: 0; 
    padding-right: 100px; } 

#footer > .container > p > a { 
    color: white; } 

.glyphicon-home { 
    padding-right: 5px; } 

.carousel-control .icon-prev, 
.carousel-control .icon-next { 
    font-size: 50px; } 

#myCarousel { 
    padding-top: 50px; } 

.text-justify { 
    text-align: justify; } 

.text-center { 
    text-align: center; } 

@media only screen and (max-width: 400px) { 
    .text-center { 
    padding-right: 40px; 
    /*require padding */ 
    padding-left: 40px; 
    /*require padding */ } } 
#about { 
    border: 1px solid black; 
    background-color: red; } 

#learnMoreButton:hover { 
    transition: background-color 200ms ease-out 50ms; } 

li > a { 
    transition: background-color 200ms ease-out 50ms; } 

/*# sourceMappingURL=stylesheet.css.map */ 

Answer 1

Dies liegt daran, Sie min-height: 500px auf dem section Element festgelegt. Daher wird Ihre Sektion immer mindestens 500px Höhe haben (auf dem Desktop sehen Sie die Lücke zwischen diesem Bereich und über uns Abschnitt, da Ihre Produkte etwa 150px Höhe haben, auf kleinen Bildschirmen hat dieser Bereich etwa 500px, so dass Sie diese Lücke nicht sehen).