Why isn't the container div taking full height?

Question

Here's my code. Can someone please help me understand why isn't my container div taking it's full height ?

I can only "fix" the problem by giving a fixed height, but I want it to take full height no matter how much content there is in it. It seems that something collapse, it won't expand and my footer keeps coming up.

Sorry if it is not clear and thank you for your answers.

/************* 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

I'm not quite sure what are you trying to achieve, but if you want your .container element to expand with its content, remove the positioning of the content. In your case, remove the position: relative; from .box1 and also remove height: 100vh; and min-height: 100vh; from .container so it can calculate its height itself.

Answer 2

could you try this? Adding display flex and making the padding to 0 normally helps me.

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