1

Porque me aparecen esos espacios entremedio no puedo quitarlos

Hola, mi consulta es como elimino los espacios en blanco entremedio, el menu de navegacion y el div de titulo de articulo nos los puedo juntar a menos que elimine la propiedad height del body. y no puedo hacer eso ya que tengo el sticky footer nose como arreglar esto.

/*
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 {
    height: 100%;
}
.contenedor {
    
    margin: 0;
    padding: 0;
    height:100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.menu {
    background-color: orange;
    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;
    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
            </div>
            <footer>
                <p>ola</p
            </footer>
        </div>
    </body>
</html>

5
  • y ¿cuál es la duda en concreto?
    – user75901
    el 24 ago. 2018 a las 4:39
  • como elimino los espacios en blanco entremedio, el menu de navegacion y el div de titulo de articulo nos los puedo juntar a menos que elimine la propiedad height del body. y no puedo hacer eso ya que tengo el sticky footer nose como arreglar esto el 24 ago. 2018 a las 4:41
  • Bienvenido a SOes, tu pregunta necesita ser trabajada... En el sentido de tener un título adecuado que de la idea general que se especificará en el cuerpo de la pregunta, por otro lado revisa esto: css-tricks.com/snippets/css/a-guide-to-flexbox
    – fredyfx
    el 24 ago. 2018 a las 4:43
  • Vale la cambiare enseguida, ya he revisado las guias de flexbox pero no logro entender porque pasa esto, todo se soluciona si el height no existe pero lo necesito. el 24 ago. 2018 a las 4:47
  • alguien sabe? :c el 24 ago. 2018 a las 6:02

1 respuesta 1

0

Tienes puesto que el display direcetion del body es la de row y esto hace que te deje esos espacios en blanco. Tienes que cambiarlo a flex-direction: column!important; para que te funcione bien.

En el caso del footer puedes utilizar las siguientes propiedades:

position: absolute; right: 0; bottom: 0; left: 0;

Esto hará que este siempre abajo.

/*
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 {
    height: 100%;
}
.contenedor {
    
    margin: 0;
    padding: 0;
    height:100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}


.menu {
    background-color: orange;
    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 {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid 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
            </div>
            <footer>
                <p>ola</p
            </footer>
        </div>
    </body>
</html>

En caso de que el body sea más alto que la pantalla tendras que cambiar las propidades del footer a estas otras para que se posicione al final:

footer {
        position: inherit;
        border: 2px solid green;
        width: 100%;
        height: 50px;
    }
4
  • en el codigo que tenia lo que estaba en el body lo deje todo en un contenedor y en el body deje solo el height: 100%. .contenedor { margin: 0; padding: 0; height:100vh; display: flex; flex-direction: row; flex-wrap: wrap; } lo que paso esque cambio el flex-direction por column y el footer ya no queda abajo como sticky, ese es el problema. nose si habra una forma de que el footer se quede abajo el 24 ago. 2018 a las 6:52
  • ahi actualize el codigo si a ese codigo le cambio a column el footer se pierde el 24 ago. 2018 a las 6:55
  • He modificado la respuesta con una posible solución el 24 ago. 2018 a las 7:25
  • cuando pongo demasiado contenido el footer hace desaparecer el contenido el 24 ago. 2018 a las 19:25

Tu Respuesta

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

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