0

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.

1 respuesta 1

0

Cuando maquetes, te recomiendo hacerlo así

<div class="contenedor">
  <header>
    <nav></nav>
  </header>
  <main>
    <!--content-->
  </main>
  <footer></footer>
</div>

Y a la etiqueta <main> añadirle el siguiente estilo css:

main{
  width: 100%;
  /*El alto de la ventana, menos la altura del menú y del footer*/
  min-height: calc(100vh - 50px - 25px); 
}

Lo coloco aquí, con un color diferente de todo lo demás:

* {
  margin: 0;
  padding: 0;
}
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; /*altura de menú*/
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.menu a {
  text-decoration: none;
}
main{
  width: 100%;
  min-height: calc(100vh - 50px - 25px);
  background: crimson;
}
section {
  background-color:red;
  border: 2px solid orange;
  width: 100%;
  height: auto;
}
.imagenes {
  background-color: orange;
  width: 100%;
}
footer {
  align-self:flex-end;
  background-color: green;
  width: 100%;
  height: 50px; /*altura del footer*/
}
<body>
  <div class="contenedor"> 
    <nav class="menu">
      <header class="logo">
        <img src="">LOGO
      </header>
    </nav>
    <main>
      <section>
        <article>
        <header>Titulo del articulo</header>
        </article>
      </section>
      <div class="imagenes">
        ACA IMAGENES<br>
        ACA IMAGENES<br>
        ACA IMAGENES<br>     
      </div>
    </main>
    <footer>
     <p>ola</p>
    </footer>
  </div>
</body>

5
  • muchas gracias, me diste una solucion sin tener que cambiar el flex-direction. Tengo una duda si me la puedes aclarar porque entonces se producia el error que tenia yo? osea el contenedor main es la solucion? en resumen. Commented el 24 ago. 2018 a las 20:41
  • La solución no es el main, de hecho puede cualquier otra etiqueta que agrupe el contenido. El error se da, porque en realidad no se crea ese espacio, es que el alto de las cajas flexibles o de bloque depende de su contenido, es decir, por defecto no se expande para ocupar el espacio restante que es lo que pretendías, sino que se posicionaron al centro y al ser la ventana más alta, una vez que los contenedores alcanzan la altura máxima de su contenido dejan de crecer y expandirse, mostrando el fondo del elemento. Commented el 24 ago. 2018 a las 21:07
  • Ah y te recomiendo mucho leer sobre el sticky footer y cómo lograrlo, así como el align-content: stretch que en tu caso no funcionaria porque a los elementos le asignas una altura específica, como hiciste con el menú y el footer. Lee esto: css-tricks.com/couple-takes-sticky-footer y escss.blogspot.com/2014/07/…. Commented el 24 ago. 2018 a las 21:09
  • en todos los casos que use esta forma de hacer la pagina con flex deberia ocupar min-height: calc(100vh - 50px - 25px); para determinar el alto q debe tener entonces en cualquier tipo de contenedor Commented el 24 ago. 2018 a las 21:18
  • Se podría decir que si, que siempre es una buena solución, pero te pase unos enlaces donde hay otras formas de lograrlo con ese mismo html y es por ejemplo usar css grid ahora también te puedes ayudar con las variables css y crear algo como .contenedor_principal { calc( 100vh - var(--altura_encabezado) - var(--altura-footer)) } aunque depende del contenido que estas diseñado, por ejemplo en una web app es algo inevitable, pero en un sitio web donde el contenido de una página no sobrepasa el "fold" ese contenido no debería de estar por separado. Commented el 24 ago. 2018 a las 23:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.