Problem with flexbox - Empty spaces between containers

Question

Problem with flexbox - Empty spaces between containers

Navigation

#1 by (0 votes)

0

Hi, my query is how I delete the blanks in between, the navigation menu and the article title div we can put them together unless you remove the height property of the body. and I can not do that since I have the sticky footer nose how to fix this.

/*
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>

css

asked by Ricardo Echeverría Ortiz 24.08.2018 в 05:48

source

1 answer

Is it possible to combine the rows and columns of a jtable? I can not modify the scrollable box of a select

score 0 · Answer 1

You have since the display direcetion of the body is the row and this makes you leave those spaces blank. You have to change it to flex-direction: column!important; to work well.

In the case of the footer you can use the following properties:

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

This will make this always down.

/*
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>

In case the body is higher than the screen you will have to change the properties of the footer to these others so that it is positioned at the end:

footer {
        position: inherit;
        border: 2px solid green;
        width: 100%;
        height: 50px;
    }