Bueno he estado aprendiendo flexbox
y lo que me pasa es que cuando le pongo el alto al body
va bien pero el footer
no es sticky
, en cambio, cuando le cambio la dirección de row
a column
se arregla el espaciado que hay pero el footer
igual deja de ser sticky
.
El código como esta acá cumple con la función de sticky
footer
pero no se porque no puedo juntar el menú con el contenedor rojo, el body
es el morado, como puedo lograr que se junten. y mantener el sticky
footer
que funciona con este código.
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 22-ago-2018, 21:07:39
Author : Ricardo
*/
* {
margin: 0;
padding: 0;
}
/*html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height:100vh;
display: flex;
flex-direction: column;
}*/
body {
background-color: purple;
height: 100%;
}
.contenedor {
margin: 0;
padding: 0;
height:100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.menu {
background-color: black;
height: 25px;
border: 2px solid yellow;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu a {
text-decoration: none;
}
section {
background-color:red;
border: 2px solid orange;
width: 100%;
height: auto;
}
.imagenes {
background-color: orange;
width: 100%;
}
footer {
align-self:flex-end;
border: 2px solid green;
background-color: green;
width: 100%;
height: 50px;
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="es">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="contenedor">
<nav class="menu">
<header class="logo"><img src="">LOGO</header>
<a href="">Inicio</a>
<a href="">Proyectos</a>
<a href="">Contacto</a>
<a href="">Equipo</a>
</nav>
<section>
<article>
<header>Titulo del articulo</header>
</article>
</section>
<div class="imagenes">
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
ACA IMAGENES<br>
</div>
<footer>
<p>ola</p
</footer>
</div>
</body>
</html>
En la pagina en miniatura se ve bien pero veanla en tamaño real.