Foros del Web - Ver Mensaje Individual - el DIV container no tiene la altura del DIV info, ¿por qué?

SLD · #2 (**permalink**) 27/10/2019, 05:11

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>