Foros del Web » Creando para Internet » CSS »

el DIV container no tiene la altura del DIV info, ¿por qué?

 Estas en el tema de el DIV container no tiene la altura del DIV info, ¿por qué? en el foro de CSS en Foros del Web. Hola, híce éste CSS: Código: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html SYSTEM "xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ツ ≡</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" ...
  #1 (permalink)  
Antiguo 26/10/2019, 20:34
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 122
Antigüedad: 11 años
Puntos: 6
el DIV container no tiene la altura del DIV info, ¿por qué?
Hola, híce éste CSS:
Código: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html SYSTEM "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ツ ≡</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><link rel="icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
*{margin:0;padding:0;}
body,html{
	margin:0;
	padding:0;
	height:100%;
	background:#e4fee0;
	color:#000006;
	font-family:verdana;
	font-size:0.90em;
	}
.kbcra{padding-top:1em;padding-bottom:1em;background-color:#130e00;background-image:linear-gradient(#130e00 33%,#e4fee0 43%,#262ce6 88%,#e4fee0 99%);color:#ffbf00;font-size:1.30em;border-bottom:3px double #262ce6;box-shadow:0 4px 2px -2px gray;}
#informacion{margin-top:3.5em;min-height:100%;}
#mnu{margin-bottom:3em;margin-top:1em;text-align:center;font-size:1.10em;color:#000000;border-top:2px solid #000;}
#mnu a:active,#mnu a:link,#mnu a:visited{color:#000000;padding:0.4em;display:block;border-bottom:1px solid #000006;font-weight:bold;}
#mnu a:hover{background-image:linear-gradient(to right,#000 1%,#fff 1%,#262ce6 139%);}
a:active,a:link,a:visited{color:#000006;background:inherit;text-decoration:none;border-bottom:1px dotted #000006;}
a:hover{border-bottom:1px solid #000006;}
#pie {
	position:fixed;
	width:100%;
	bottom:0;
	color:#fff;
	background:#000;
	font-size:6.5pt;
	text-align:center;
	}
.nv{
clear:both;
border:0;
margin:0;
padding:0;
visibility:hidden;
}
nav{background:#d7d8fb;color:#000;border-bottom:1px solid #000;}
nav a:link,a:visited{font-weight:bold;color:#000;background:inherit;padding-left:0.3rem;padding-right:0.3rem;border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;}
nav a:hover{background:#000;color:#f0f0f0;}
nav ul{border-bottom:1px solid #000;}
#navicon{
	font-size:3em;
	padding-right:0.1em;
	position:relative;
	margin-left:0.05em;
	margin-top:-0.22em;
	}
#mostrarmenu,#menu-top{display:none;}
#mostrarmenu:checked~#menu-top{display:block;}
@media(min-width:500px){
#navicon{display:none;}
nav{text-align:center;position:fixed;}
nav li{display:inline;padding-right:0.7rem;}
#menu-top{display:block;}
#mnu{width:210px;border-top:0;border-bottom-right-radius:1em;padding-right:0.01em;background-image:linear-gradient(to left,rgba(255,0,0,0) 36%,#262ce6 99%,#000006 6%);box-shadow:9px 7px 9px 0 #000006;}
.mnuu{border-bottom-right-radius:1em;}
#container{background:orange;height:100%;margin-top:-1.1em;margin-left:3.00em;margin-right:3.00em;box-shadow:0 18px 28px 0 gray;}
#informacion{min-height:100%;background:#aabbcc;padding-bottom:3em;float:right;margin-right:1em;width:calc((100% - 220px) - 30px);}
}
</style><script type="text/javascript" src="js.js"></script></head>

<body><nav><input id="mostrarmenu" type="checkbox" /><label for="mostrarmenu"><p id="navicon" class="fd">☰</p></label><ul id="menu-top"><li><a href="https://www.google.com/">Inicio</a></li><li><a href="https://www.google.com/?time=1572139139">Ingresar</a></li><li><a href="https://www.google.com/?time=1572139139">Registrarme</a></li><li><a href="https://www.google.com/?time=1572139139">Condiciones del servicio</a></li></ul></nav>


<div id="container">

<div id="informacion">
<p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p>
</div>

<div id="mnu"><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/?d=1" class="mnuu">Detalle 01</a>
</div>

</div>

<div id="pie">leyenda</div>
</body></html>
pero el div ANARANJADO (container), se queda cortito ante el DIV "info" (gris/azúl).

Pueden por favor brindarme la corrección que hace falta.

Si le cambian el tamaño, verán que es un CSS responsive sin JavaScript.

Hacer que las tres rayas ( ≡ ) se conviertan en una X solo puede hacerse con Java Script ?

gracias!
  #2 (permalink)  
Antiguo 27/10/2019, 05:11
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 122
Antigüedad: 11 años
Puntos: 6
Respuesta: el DIV container no tiene la altura del DIV info, ¿por qué?
Hola,

pueden ver que utilizo el "respectivo"

body,html{height:100%;}

y luego

#container{height:100%;}
#informacion{min-height:100%;}

alguien puede por favor indicarme lo que hace falta para que la caja color naranja tenga la altura correcta?

Código: 
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>≡</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><link rel="icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
*{margin:0;padding:0;}
body,html{
	margin:0;
	padding:0;
	height:100%;
	background:#e4fee0;
	color:#000006;
	font-family:verdana;
	font-size:0.90em;
	}
.kbcra{padding-top:1em;padding-bottom:1em;background-color:#130e00;background-image:linear-gradient(#130e00 33%,#e4fee0 43%,#262ce6 88%,#e4fee0 99%);color:#ffbf00;font-size:1.30em;border-bottom:3px double #262ce6;box-shadow:0 4px 2px -2px gray;}
#informacion{margin-top:3.5em;min-height:100%;}
#mnu{margin-bottom:3em;margin-top:1em;text-align:center;font-size:1.10em;color:#000000;border-top:2px solid #000;}
#mnu a:active,#mnu a:link,#mnu a:visited{color:#000000;padding:0.4em;display:block;border-bottom:1px solid #000006;font-weight:bold;}
#mnu a:hover{background-image:linear-gradient(to right,#000 1%,#fff 1%,#262ce6 139%);}
a:active,a:link,a:visited{color:#000006;background:inherit;text-decoration:none;border-bottom:1px dotted #000006;}
a:hover{border-bottom:1px solid #000006;}
#pie {
	position:fixed;
	width:100%;
	bottom:0;
	color:#fff;
	background:#000;
	font-size:6.5pt;
	text-align:center;
	}
.nv{
clear:both;
border:0;
margin:0;
padding:0;
visibility:hidden;
}
nav{background:#d7d8fb;color:#000;border-bottom:1px solid #000;}
nav a:link,a:visited{font-weight:bold;color:#000;background:inherit;padding-left:0.3rem;padding-right:0.3rem;border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;}
nav a:hover{background:#000;color:#f0f0f0;}
nav ul{border-bottom:1px solid #000;}
#navicon{
	font-size:3em;
	padding-right:0.1em;
	position:relative;
	margin-left:0.05em;
	margin-top:-0.22em;
	}
#mostrarmenu,#menu-top{display:none;}
#mostrarmenu:checked~#menu-top{display:block;}

#container{min-height:100%;}
@media(min-width:500px){
#navicon{display:none;}
nav{text-align:center;position:fixed;}
nav li{display:inline;padding-right:0.7rem;}
#menu-top{display:block;}
#mnu{width:210px;border-top:0;border-bottom-right-radius:1em;padding-right:0.01em;background-image:linear-gradient(to left,rgba(255,0,0,0) 36%,#262ce6 99%,#000006 6%);box-shadow:9px 7px 9px 0 #000006;}
.mnuu{border-bottom-right-radius:1em;}
#container{height:100%;background:orange;margin-top:-1.1em;margin-left:3.00em;margin-right:3.00em;box-shadow:0 18px 28px 0 gray;}
#informacion{min-height:100%;background:#aabbcc;padding-bottom:3em;float:right;margin-right:1em;width:calc((100% - 220px) - 30px);}
}
</style><script type="text/javascript" src="js.js"></script></head>
<body><nav><input id="mostrarmenu" type="checkbox" /><label for="mostrarmenu"><p id="navicon" class="fd">☰</p></label><ul id="menu-top"><li><a href="https://www.google.com/">Inicio</a></li><li><a href="https://www.google.com/?time=1572139139">Ingresar</a></li><li><a href="https://www.google.com/?time=1572139139">Registrarme</a></li><li><a href="https://www.google.com/?time=1572139139">Condiciones del servicio</a></li></ul></nav>


<div id="container">

<div id="informacion">
≡ 
<p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p>
</div>

<div id="mnu"><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/">Al inicio</a><a href="https://www.google.com/?d=1" class="mnuu">Detalle 01</a>
</div>

</div>

<div id="pie">leyenda</div>

</body></html>
  #3 (permalink)  
Antiguo 27/10/2019, 05:47
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 122
Antigüedad: 11 años
Puntos: 6
Respuesta: el DIV container no tiene la altura del DIV info, ¿por qué?
He dejado las dos cajas solas y hecho muchas pruebas, sin embargo la altura de caja naranja siempre está mala:
Código: 
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Caja Naranja</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
*{margin:0;padding:0;}
body,html{
	margin:0;
	padding:0;
	height:100%;
	background:#e4fee0;
	color:#000006;
	font-family:verdana;
	font-size:0.90em;
	}
#container{height:100%;background:orange;margin-top:-1.1em;margin-left:3.00em;margin-right:3.00em;box-shadow:0 18px 28px 0 gray;}
#informacion{min-height:100%;background:#aabbcc;padding-bottom:3em;float:right;margin-right:1em;width:calc((100% - 220px) - 30px);}
#pie {
	position:fixed;
	width:100%;
	bottom:0;
	color:#fff;
	background:#000;
	font-size:6.5pt;
	text-align:center;
	}
.nv{
clear:both;
border:0;
margin:0;
padding:0;
visibility:hidden;
}
</style></head><body>
<div id="container">
<div id="informacion">
<p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p><p>info</p>
</div>
<div class="nv"></div>
</div>

<div id="pie">leyenda</div>

</body></html>
... alguna lúz ?
  #4 (permalink)  
Antiguo 27/10/2019, 11:09
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: el DIV container no tiene la altura del DIV info, ¿por qué?
tomando de base el primer codigo que dejaste

errores
1.- utilizar height:100% esto indica que su alto siempre sera el 100% de la pantalla, cuando el contenido se desborda pero el alto no cambiara, le importa un cacahuate, se ajusta a lo indicado y no al contenido.
Utiliza min-height en su lugar, ojo experimenta donde debes utilizarlo, solo es una pista

2.- la propiedad float hace que el elemento salga del flujo normal del documento, es decir los elementos padre no tomaran su altura, investiga sobre limpiar floats y/o uso de flexbox
  #5 (permalink)  
Antiguo 27/10/2019, 11:42
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 122
Antigüedad: 11 años
Puntos: 6
Respuesta: el DIV container no tiene la altura del DIV info, ¿por qué?
Cita:
Iniciado por ArturoGallegos Ver Mensaje
... investiga sobre limpiar floats y/o uso de flexbox
Gracias Arturo.

Cita:
Iniciado por ArturoGallegos Ver Mensaje
tomando de base el primer codigo que dejaste
Puedes indicarme por favor si es posible reeemplazar ≡ por X sin utilizar JavaScript al momento de hacer click? (es decir, con "trucos" CSS)
  #6 (permalink)  
Antiguo 27/10/2019, 16:36
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: el DIV container no tiene la altura del DIV info, ¿por qué?
Claro que es posible, tienes las propiedades transition y animate

aqui te comparto una idea que estaba armando para un proyecto en curso, aun no esta pulido pero puedes tomarlo de ejemplo y darte una idea de como hacerlo (ignora la pestaña de Javascript, no se quitarla aquí)
  #7 (permalink)  
Antiguo 27/10/2019, 19:26
SLD
 
Fecha de Ingreso: diciembre-2013
Mensajes: 122
Antigüedad: 11 años
Puntos: 6
Respuesta: el DIV container no tiene la altura del DIV info, ¿por qué?
Cita:
Iniciado por ArturoGallegos Ver Mensaje
Claro que es posible, tienes las propiedades transition y animate
Gracias Arturo.

He de revisar...

Etiquetas: altura, container, forma, google, html, info, text
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:34.