Layout en CSS

quico5 · #1 (**permalink**) 30/04/2017, 08:51

Me he planteado este posible layout donde el Header y el Footer sean opcionales, aunque me surje la duda de la colocación del Footer al ir en segundo lugar en vez del último

Código HTML:

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Grid</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/color-full.css">
  </head>
  <body>
    <header>Header</header>
    <footer>Footer</footer>
    <aside>Aside</aside>
    <main>Main</main>
    <aside>Aside</aside>
  </body>
</html>

Código:

body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
body >* {
  box-shadow: 0 0 0 1px #f00;
}
body header,
body footer {
  line-height: 3em;
  width: 100%;
}
body aside,
body main {
  flex: 1;
  height: calc(100% - 0em);
}
body header:only-of-type~aside,
body footer:only-of-type~aside,
body header:only-of-type~main,
body footer:only-of-type~main {
  height: calc(100% - 3em);
}
body header:only-of-type~footer:only-of-type~aside,
body header:only-of-type~footer:only-of-type~main {
  height: calc(100% - 6em);
}
body footer {
  order: 2;

pzin · #2 (**permalink**) 30/04/2017, 12:46

No pongas el footer ahí; es semánticamente incorrecto. Le estás dando, de esa manera, una importancia que no tiene. Y del contenido pienso lo mismo, pero a la inversa; está muy abajo y restando importancia.

En un caso ideal la estructura debiera de ser: contenido, cabecera, pie.