Align footer to bottom of page with Flexbox when another elements aligned center

user_7895443 0
Viewed 320

I can't find the way how to align both div elements at the center vertically and footer element aligned to bottom of page using flexbox.

HTML and CSS

.section {
    height: 100vh;
    display: flex;
    align-items: center;
}
.container {
    width: 100%;
    max-width: 1400px;
    padding: 0 15px;
    margin: 0 auto;
}
.section__header {
    text-align: center;
}
.footer {
    margin: auto;
    max-width: 848px;
}
<section class="section contact">
    <div class="container">
        <div class="section__header">...</div>
        <div class="contact__form">...</div>
        <footer class="footer"></footer>
    </div>
</section>

I tried to use almost all options without success...all what I got - all elements now is centered horizontally and vertically, but how align footer to bottom and leave all other element at center?

flexbox center css html
2 Answers

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- ========== Title ========== -->
    <title>stack</title>

    <style type="text/css">
        *,
        *:before,
        *:after {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
        }

       .section {
            height: 100vh;
            width: 100%;
            
            background: green;
        }
        .container {
            width: 100%;
            height: 100%;
            /*max-width: 1400px;*/
            padding: 0 15px;
            /*margin: 0 auto;*/

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: blue;
        }
        
        .contentContainer {
            height: 80%;
            width: 100%;

            display: flex;
            flex-direction: column;
            justify-content: center;
            background: green;
        }
        
        .section__header {
            /*text-align: center;*/
            background: grey;
        }

        .contact__form {
            background: violet;
        }

        .footer {
            height: 20%;
            width: 100%;
            background: yellow;
            /*margin: auto;*/
            /*max-width: 848px;*/
        }
    </style>
</head>
<body>
    <section class="section">
        <div class="container">
            <div class="contentContainer">
                <div class="section__header">header</div>
                <div class="contact__form">form</div>
            </div>
            <footer class="footer">footer</footer>
        </div>
    </section>
</body>
</html>

Make a separate container for the contents and use space-between.

user_72083760 

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.section {
    display: flex;
    height: 100vh;
    justify-content: space-between;
    flex-direction:column;
    border:1px solid sienna;
}
.container {
    display:flex;
    justify-content:center;
    flex-direction:column;
    width: 100%;
    max-width: 1400px;
    padding: 0 15px;
    margin: 0 auto;
    border:1px solid black;
}
.section__header {
    text-align: center;
    border:1px solid maroon;
}

.contact__form{
    border:1px solid blue;
}

.footer {

    border:1px solid red;
}
<section class="section contact">
    <div class="container">
        <div class="section__header">header</div>
        <div class="contact__form">contact</div>
       
    </div>
    
     <footer class="footer">footer</footer>
</section>

user_133119690
Related