No puedo encontrar la manera de alinear ambos elementos div en el centro verticalmente y el elemento de pie de página alineado al final de la página usando flexbox.
HTML y 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>
Intenté usar casi todas las opciones sin éxito... todo lo que obtuve: todos los elementos ahora están centrados horizontal y verticalmente, pero ¿cómo alinear el pie de página hacia abajo y dejar todos los demás elementos en el centro?
------------------------------------
*{
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>
------------------------------------
<!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>
Haga un contenedor separado para el contenido y use espacio entre ellos.
