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应用程序推出，如果在Dev工具中更容易发现问题，请使用此链接： https://hangman-michael-ryan.herokuapp.com/

Answer 1

尝试将overflow：hidden放到您的section容器中，它将处理其中的所有元素。希望能帮助到你！最后一件事，你应该在section标签内部创建元素时使用div而不是section。 section标签仅用于分组元素并使代码组织。

＆＃13;

section.container{
  overflow: hidden;
}

＆＃13;

在调整大小时，Div从容器底部推出

1 个答案: