How can I get the space that the body leaves between two containers, does not let me put them together

Question

How can I get the space that the body leaves between two containers, does not let me put them together

Navigation

#1 by (0 votes)

0

Well I've been learning flexbox and what happens to me is that when I put the stop to body goes well but the footer is not sticky , instead, when I change the address of row to column the spacing is fixed but the footer equal stops being sticky .

The code like this here complies with the function of sticky footer but I do not know why I can not join the menu with the red container, the body is the purple, how can I get them together. and keep sticky footer that works with this code.

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

On the thumbnail page it looks good but see it in real size.

css flexbox

asked by Ricardo Echeverría Ortiz 24.08.2018 в 21:46

source

1 answer

Error that will not let me compile file in c ++ / sqlite3 How can I access the values of an XML tags with jquery?

score 0 · Accepted Answer

When you pack, I recommend you do it like this

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

And the label <main> add the following style css:

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

I put it here, with a different color from everything else:

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