pretendo tener una plantilla HTML muy básica con CUATRO cajones:
1// Cajón VERDE "cuerpo/body/conenedor de TODO"
2// Cajón ROSA "menú principal/header"
3// Cajón GRIS menú de la izquierda enláces den LETRAS
4// Cajón AMARILLO contenido de cáda página
he pensado que en el interior del cajón AMARILLO puedo colocar n cajones con contenidos de imagenes, video, etc...
ésta es la plantilla HTML y sí, debe ser x-HTML:
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><style type="text/css">@import url("https://yahoo.com/css.css");</style><script type="text/javascript" src="https://yahoo.com/java.js"></script><link rel="icon" href="https://yahoo.com/favicon.ico" type="image/x-icon" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Hola! {yahoo}</title></head><body>
<div id="todito">
<nav><a href="">LINK 1</a><a href="">LINK 2</a><a href="">LINK 3</a><a href="">LINK 4</a></nav>
<div id="contenido"<h3>CONTENIDO de cáda una de las páginas :-)</h3><p>uu</p><p>uu</p></div>
<div id="menu"><p><a href="">LINK A</a></p><p><a href="">LINK B</a></p><p><a href="">LINK C</a></p><p><a href="">LINK D</a></p><p><a href="">LINK E</a></p><p><a href="">LINK F</a></p><p><a href="">LINK G</a></p><p><a href="">LINK H</a></p><p><a href="">LINK I</a></p></div>
<div id="pie">0.01294 segundos - <a href="mailto:[email protected]">© [email protected]</a><em id="lenguaje"></em></div>
</div>
</body></html>
y éste es el CSS:
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:verdana;font-size:0.90em;}
nav{margin:auto;text-align:center;background:lightpink;color:green;border-bottom:1px solid black;}
nav a{border-bottom:1px solid transparent;border-top:1px solid transparent;display:block;padding:1em;text-decoration:none;font-weight:bold;}
nav a:hover{border-top:1px solid #000;border-bottom:1px solid #000;background:gold;}
nav a.bb0:hover{border-bottom:1px solid transparent;}
nav a.bt0:hover{border-top:1px solid transparent;}
#cosmos{background:yellowgreen;color:black;min-height:100%;}
#menu{transition:1s;width:100%;background:gainsboro;color:black;text-align:center;}
#contenido{padding-top:2em;background:gold;color:black;padding-bottom:3em;}
#pie{bottom:0;background:#010105;color:#fdfffe;font-family:verdana;font-size:0.67em;position:fixed;text-align:center;width:100%;}
#pie a:active, #pie a:link, #pie a:visited{background:#010105;color:#fdfffe;text-decoration:none;}
@media(min-width:600px){
nav{padding:1em;}
nav a{display:inline-block;padding:1em;border:1px solid transparent;}
nav a:hover,nav a.bb0:hover,nav a.bt0:hover{border:1px solid black;}
#contenido{
width:calc(100% - (20em + 5em + 5em));
margin-right:5em;
float:right;
padding-left:3em;
}
#menu{
width:20em;margin-left:5em;border-right:1px solid #000;
}
#contenido,#menu{min-height:100%;}
}
pretendo que el menú de la IZQUIERDA (caja GRIS) se despliegue vertical completo,
por ello utilizo min-height:100%;
pero no me funciona.
También pretendo que el cajón amarillo se despliegue en TODO su vertical, por ello utilizo min-height:100%;
y tampóco m funciona.
con ello, tengo DOS preguntas:
1// debo utilizar MÁS cajones "contenedores" para lograr el vertical al 100% ?
2// de dónde puedo obtener plantillas MUY básicas que solo tengan el modelo de las CAJAS sin contenido ni JavaScript, por ejemplo en https://www.w3schools.com/w3css/w3css_templates.asp hay buenas plantillas pero ya tienen imagenes y texto, hay plantillas de CAJONES CSS?
gracias!
ah!, los DOS errres son:
1// el cajón GRIS no se despliega 100% vetical
2// el cajón AMARILLO no se despliega 100% vetical
<div id="contenido"<h3>CONTENIDO de cáda una
le falta el cierre>
del elemento#contenido
.height: 100vh;
al contenido gris (esto toma el alto de la pantalla). Si el alto de la cabecera va a ser siempre fijo se podría mejorar conheight: calc(100vh - {ALTO_CABECERA}px);
.