Div vom Boden des Containers auf die Größe geschoben

Question

Ich habe einen Container mit mehreren Zeilen und Spalten innerhalb davon mit Bootstrap gebaut. Das Problem, das ich erfahre, ist, wenn die Seite vertikal skaliert wird, die Elemente im Container auf der Unterseite überlaufen. Code-Schnipsel unten:

---

HTML

<section class='container'> 

<!-- Title --> 
<section class='row'> 
    <section class='col-md-12 text-center'> 
     <img id='logo' src='assets/images/logo.png' alt="Futurama Logo"> 
     <h1 id='game-title' class='page-header text-center'>Hangman</h1> 
    </section> 
</section> 

<!-- Game screen --> 
<section id='game-screen' class='row'> 
    <section id='game-left' class='col-md-6'> 
     <section id='image-area'></section> 
    </section> 
    <section id='game-right' class='col-md-6 text-center'> 
     <section id='top-row' class='row'> 
      <section id='right-top' class='col-md-12 text-center'> 
       <h2 class='text-primary'>Press any key to get started!</h2><br><br> 
       <h4 id='wins'>Wins: <span id='winCount'></span></h4><br><br> 
       <h2>Current Word</h2> 
       <h3 id='word'></h3> 
      </section> 
     </section> 
     <section id='bottom-row' class='row'> 
      <section id='guesses' class='col-md-12'> 
       <h3>Number of guesses remaining: <span id='guessCount'></span></h3> 
      </section> 
      <section id='right-bottom' class='col-md-12'> 
       <h4>Letters Guessed</h4> 
       <section id='letters'></section> 
       <p class='' id='outcome'></p> 
       <audio id='audio' src='' autoplay="true"></audio> 
      </section> 
     </section> 
    </section> 
</section> 

CSS

html, body{ 
    height: 100%; 
} 
body{ 
    background-image: url('../images/city.jpg'); 
} 
.container{ 
    position: relative; 
    top: 20px; 
    height: 90%; 
    background-color: white; 
} 
#logo{ 
    min-width:50%; 
} 
#game-title{ 
    font-size: 50px; 
    letter-spacing: 10px; 
    transition: letter-spacing 2s; 
} 
#game-title:hover{ 
    letter-spacing: 50px; 
} 
.page-header{ 
    margin-top: 0px; 
} 
#game-screen{ 
    height: 75%; 
} 
#game-left, #game-right{ 
    height:100%; 
} 
#image-area{ 
    background-image: url('../images/futurama.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    height:85%; 
} 
#top-row{ 
    border-bottom: 2px solid black; 
} 
#top-row, #bottom-row{ 
    height: 50%; 
} 
#word{ 
    letter-spacing: 10px; 
} 
#guesses{ 
    height:25%; 
} 
#right-bottom{ 
    height:75%; 
} 
#letter{ 
    display: inline; 
    margin: 10px; 
    font-size: 20px; 
} 
#outcome{ 
    position: relative; 
    top: 30px; 
    font-size: 30px; 
} 

---

Ich habe dies als Heroku App gestartet, wenn es einfacher ist, das Problem in Dev Tool zu entdecken, bitte diesen Link: Putting Überlauf https://hangman-michael-ryan.herokuapp.com/

Answer 1

Versuch: zu Ihrem Abschnitt Container versteckt und es wird alles das Element fertig innerhalb von es. ich hoffe es hilft! eine letzte Sache, sollten Sie div anstelle von Abschnitt beim Erstellen von Elementen innerhalb der Abschnitt-Tag verwenden. Das Abschnittstag dient nur zum Gruppieren von Elementen und zum Organisieren des Codes.

section.container{ 
 
    overflow: hidden; 
 
}