为什么容器div不能全高？

Question

这是我的代码。有人可以帮我了解为什么我的容器div不能全满吗？

我只能通过给出一个固定的高度来“解决”这个问题，但是无论它中有多少内容，我都希望它占据整个高度。似乎有些东西塌陷了，它不会扩大，并且我的页脚不断上升。

很抱歉，如果不清楚，谢谢您的回答。

/************* GLOBAL ***************/
    
    * {
        padding:0;
        margin:0;
    }
    
    body{
        margin: 0;
        padding: 0;
        background-color: #e6ccff;
        font-size: 62.5%;
        height: 100vh;
        position:absolute;
    }
    
    .containerHead{
        width: 80%;
        height: 70px;
        margin: 0 auto;
        padding: 0 20px 0 20px;
        /*border: 1px solid black;*/
    }
    
    .clr{
        clear: both;
    }
    
    
    /************* HEADER *************/
    
    
    header{
        /*background-color: #528;
        height: 70px;
        box-shadow: 5px 5px 25px 7px #417 inset;*/
        height: 70px;
        background-color: rgba(0, 0, 0, 0.1)
    }
    
    
    .logo1 {
        padding: 5px 10px 0 5px;
        font-size: 20px;
        float: left;
    }
    
    .logo1 img{
        display: inline-block;
        width: 100px;
        height: 60px;
    }
    
    .logo2 {
        padding: 5px 10px 0 5px;
        font-size: 20px;
        float: right;
    }
    
    .logo2 img{
        display: inine-block;
        width: 100px;
        height: 60px;
        transform: rotateY(180deg);
    }
    .navbar {
        overflow: hidden;
        width: 70%;
        margin: 0;
        position: absolute;
        top: 28px;
        margin-left: 250px;
        width: 50%;
        background-color: rgba(0, 0, 0, 0.1)
    }
    
    .navbar ul{
        padding: 0;
        margin: 0;
        list-style-type: none;
        float: left;
        margin-left: 50px;
        background-color: rgba(0, 0, 0, 0.1)
    }
    .navbar ul li {
        float: left;
        margin-left: 10px;
        background-color: rgba(0, 0, 0, 0.1)
    }
    
    .navbar ul li a{
        display: inline-block;
        padding: 10px 15px;
        text-decoration: none;
        color: rgb(255, 255, 35);
        text-align: center;
        text-transform: uppercase;
        font-size: 12px;
        font-family: 'Raleway', sans-serif;
        background-color: rgba(0, 0, 0, 0.1)
    }
    
    .nav-item1 :after{
        content:"";
        display: block;
        height: 2px;
        width: 0px;
        background-color: transparent;
        margin: 3px auto 0;
        transition: .5s;
    }
    
    .nav-item1 :hover:after{
        background-color: rgb(255, 255, 35);
        width: 100%;
    }
    
    .nav-item2 :after{
        content:"";
        display: block;
        height: 2px;
        width: 0px;
        background-color: transparent;
        margin: 3px auto 0;
        transition: .5s;
    }
    
    .nav-item2 :hover:after{
        background-color: rgb(255, 255, 35);
        width: 100%;
    }
    
    .nav-item3 :after{
        content:"";
        display: block;
        height: 2px;
        width: 0px;
        background-color: transparent;
        margin: 3px auto 0;
        transition: .5s;
    }
    
    .nav-item3 :hover:after{
        background-color: rgb(255, 255, 35);
        width: 100%;
    }
    
    .nav-item4 :after{
        content:"";
        display: block;
        height: 2px;
        width: 0px;
        background-color: transparent;
        margin: 3px auto 0;
        transition: .5s;
    }
    
    .nav-item4 :hover:after{
        background-color: rgb(255, 255, 35);
        width: 100%;
    }
    
    .nav-item5 :after{
        content:"";
        display: block;
        height: 2px;
        width: 0px;
        background-color: transparent;
        margin: 3px auto 0;
        transition: .5s;
    }
    
    .nav-item5 :hover:after{
        background-color: rgb(255, 255, 35);
        width: 100%;
    }
    
    /*************** BANNER *****************/
    
    .banner{
        width: 100%;
        height: 550px;
        background-image: url('basket.jpeg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        border-bottom: 5px outset #528;
        position: relative;
        z-index: 1;
    }
    
    .cali {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 400px;
        background-image: url('cali.png');
        background-size: cover;
        z-index: 10;
        transform: rotateZ(30deg);
    }
    
    /*************** CONTENT ****************/
    
    .container{
        width: 80%;
        min-height: 100vh;
        margin: 0 auto;
        position: relative;
        padding: 30px 30px 0;
        /*border: 1px solid black;*/
        clear:both;
        background-color: #FFF;
        height: 100vh;
        overflow:hidden;
    }
    
    .title{
        margin: 0 auto;
        width: 380px;
        text-align: center;
    }
    
    .box1 {
        border: 1px solid black;
        width: 80%;
        margin: 0 auto;
        position: relative;
        top: 50px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        align-content: space-between;
    }
    
    /******************* FOOTER ***************/
    
    footer{
        background-color: #528;
        height: 70px;
        box-shadow: 5px 5px 25px 7px #417 inset;
    }

         <!DOCTYPE html>
         <html lang="fr">
         <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>California Purple Eagles</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
    </head>
    
        <body>
            <header>
                <div class="containerHead">
                    <span class="logo1"><img src="eagle.png" alt=""></span>
                    <nav class="navbar">
                    <ul>
                        <li class="nav-item1"><a href="#">Home</a></li>
                        <li class="nav-item2"><a href="#titleteam">Our Team</a></li>
                        <li class="nav-item3"><a href="#">Match Schedule</a></li>
                        <li class="nav-item4"><a href="#">Gallery</a></li>
                        <li class="nav-item5"><a href="#">Contact</a></li>
                    </ul>
                </nav>
                <span class="logo2"><img src="eagle.png" alt=""></span>
            </div>
            <div class="clr"></div>
        </header>
        <div class="banner">
            <div class="cali">
            <div class="clr"></div>
            </div>
        </div>
        
        <div class="container">
            <div class="title" id="titleteam">
                <img src="ourTeam.png" alt="" class="team">
            </div>
            <div class="box1">
                <img src="https://via.placeholder.com/100" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                <img src="https://via.placeholder.com/150" alt="">
                
            </div>
        </div><br><br><br><br><br><br><br>
        <footer>
        </footer>
    </body>
    </html>

Answer 1

您可以尝试这个吗？添加display flex并将padding设置为0通常对我有帮助。

.container{
    width: 80%;
    margin: 0 auto;
    position: relative;
    padding: 0;
    /*border: 1px solid black;*/
    clear:both;
    background-color: #FFF;
    height: 100vh;
    display:flex;
    overflow:hidden;
}

Answer 2

我不太确定您要实现什么目标，但是如果您希望.container元素随其内容扩展，请删除该内容的位置。在您的情况下，请从position: relative;中除去.box1，并从height: 100vh;中除去min-height: 100vh;和.container，以便它可以自己计算高度。