在調整大小時從容器底部推入的div

Question

我有一個容器，其中包含多個行和列，並且使用Bootstrap構建它。我遇到的問題是當頁面垂直調整大小時，容器內的元素溢出。代碼片段如下：

---

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

---

我都推出以此爲Heroku的應用程序，如果是比較容易發現的開發工具問題，請使用此鏈接： https://hangman-michael-ryan.herokuapp.com/

Answer 1

嘗試把溢出：隱藏你的部分容器，它會應付內部的所有元素它。希望能幫助到你！ 最後一件事，您應該在section標籤內創建元素時使用div而不是section。部分標記僅用於分組元素並使您的代碼組織起來。

section.container{ 
 
    overflow: hidden; 
 
}