크기 조정시 컨테이너 맨 아래에서 밀어 넣기

부트 스트랩으로 만들어진 여러 행과 열이있는 컨테이너가 있습니다. 내가 겪고있는 문제는 페이지의 크기가 수직으로 바뀌면 컨테이너 내부의 요소가 아래쪽으로 넘칠 때입니다. 코드 조각 아래 :크기 조정시 컨테이너 맨 아래에서 밀어 넣기

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

Devoku에서이 문제를 쉽게 발견 할 수 있다면 Heroku 앱으로 시작했습니다. https://hangman-michael-ryan.herokuapp.com/

출처

2016-08-05 MARyan87

section.container{ overflow: hidden; }

나는 당신의 웹 사이트를보고 정상 작동합니다. 브라우저의 크기를 세로로 조정하면 물론 컨테이너의 내용이 그대로 유지됩니다. –

섹션 컨테이너에 오버플로 : 숨김을 넣어보세요. 그것. 도움이되기를 바랍니다! 마지막으로 섹션 태그 안에 요소를 만들 때 섹션 대신 div를 사용해야합니다. 섹션 태그는 요소를 그룹화하고 코드를 체계화하기위한 것입니다.

출처

2016-08-05 06:27:30

크기 조정시 컨테이너 맨 아래에서 밀어 넣기

답변

관련 문제