0

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

2
  • No es una solución, pero tienes un error en tu código HTML. A <div id="contenido"<h3>CONTENIDO de cáda una le falta el cierre > del elemento #contenido.
    – Gabri
    el 16 nov. 2020 a las 12:26
  • 1
    Puedes añadir el estilo 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 con height: calc(100vh - {ALTO_CABECERA}px);.
    – Gabri
    el 16 nov. 2020 a las 12:41

2 respuestas 2

1

Edito...

Bien, pues prueba esta edición, solamente agrupa el contenido en un contenedor padre, y usa el height: 100%; en ambos contenedores.

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:verdana;font-size:0.90em;}
nav{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;}

#todito {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.container {
  flex-grow: 1;
}

#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%;}
}
<?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 class="container">
<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>
<div id="pie">0.01294 segundos - <a href="mailto:[email protected]">© [email protected]</a><em id="lenguaje"></em></div>

</div>

</body></html>

Una sálida mas elaborada sería el uso de flexbox, te recomiendo te documentes sobre el mismo, las cajas flotantes float ya casi están en desuso.

8
  • Gracias @Gabri, he colocado ésta .línea en el CSS: #todito{background:yellowgreen;color:black;min-height:100vh;} y nada cambia; el error de NO CERRAR el DIV (<div id="contenido"<h3>) fué PEGANDO el código aquí. @Elboy también coloqué tu instrucción y no funcionó. Gracias.
    – B UTP
    el 17 nov. 2020 a las 0:41
  • Prueba con la edición que hice a la respuesta.
    – Elboy
    el 17 nov. 2020 a las 16:27
  • Muchas gracias @Elboy, míra cómo se vé cuando PEGO el código que me haz brindado: unir.team/4cajas en efecto, solo quiero 4 cajas y no sé por que se vuelve un lío ... (me refiero a que exíste un SCROLL cuando no debería existir)
    – B UTP
    el 17 nov. 2020 a las 18:17
  • En tu ejemplo no has incluido el contenedor .container como te lo puse en el ejemplo, si quieres que no haya scroll entonces en vez de usar height: 100% usa min-height: calc(100vh - 71px); 71px el es alto de tu nav. Lógicamente si el contenido de la página supera el alto del viewport, siempre verás el scroll.
    – Elboy
    el 17 nov. 2020 a las 20:02
  • gracias @Elboy lo que sucede es que el HEADER es dinámico, puede CAMBIAR de altura y el tamaño del texto también. En algunas paginas habrá MUCHAS lineas y en otras POCAS, por ello el SCROLL debe existir solo al ser necesario
    – B UTP
    el 17 nov. 2020 a las 20:08
0

Para responder la pregunta original:

1// debo utilizar MÁS cajones "contenedores" para lograr el vertical al 100% ?

con la respuesta/solución de @Elboy vemos que la opción es utilizar FlexBox al buscar ése tema, he llegado a https://www.udemy.com/course/curso-de-flexbox-desde-0/learn/lecture/5832324 (curso gratuito) y la respuesta es:

https://pasteboard.co/JB2Iep2.png

Por ahora la segunda pregunta continúa sin respuesta.

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.