Tengo un problema con un diseño: no está en línea, solo local, pero si copia y pega el código siguiente en una página html y lo ejecuta localmente, verá el misma página que hago.100% de altura con pie de página fijo e integrado Google Map
Está a punto de llegar. Lo que intento lograr es una página sin barras de desplazamiento que consuma todo el espacio vertical disponible. Sí, puedo establecer "overflow: hidden" en la declaración del contenedor y eso ayuda, pero no es del todo correcto. Quiero que el mapa de google esté rodeado por un borde 1em. Tengo esto en 3 lados pero la declaración del 100% de altura en el contenido div bloquea el borde inferior. Si no te das cuenta de las implicaciones de un div del mapa de Google de un porcentaje, entonces el padre TIENE que tener una altura declarada para que funcione. Como el pie de página es absoluto y está fuera del flujo, no hay un límite "inferior" para trabajar y el diseño simplemente no funciona. El contenido div 100% de altura, básicamente, parece tomar su tamaño de la ventana gráfica y no del div que lo contiene.
Me está volviendo loco ... parece que no se me ocurre cómo hacerlo y realmente agradecería algo.
de inicio aquí:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:fff;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:960px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
border-bottom:1px solid #ccc;
border-left:1em solid #ccc;
height:108px;
position:relative;
}
div#header h1
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#header2
{
border-bottom:1px solid #ccc;
border-left:1em solid #999;
height: 40px;
position: relative;
}
div#header2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal
{
border-bottom:1px solid #ccc;
border-left:1em solid #cc3300;
height: 40px;
position: relative;
}
div#headerInternal p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal2
{
height: 40px;
position: relative;
}
div#headerInternal2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#rightCol
{
float:right;
width:29%;
padding-bottom:5em; /* bottom padding for footer */
}
div#content
{
float:left;
width:70%;
height:100%; /* fill that hole! */
border-right:1px solid #ccc;
}
div#content p {
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:40px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
div#footer p {
padding:1em;
margin:0;
}
.paddedContent
{
height:100%;
margin: 1em;
}
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.397, 1.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div id="header">
<h1>Title here...</h1>
</div>
<div id="header2">
<p>Secondary menu...</p>
</div>
<div id="rightCol">
<div id="headerInternal2">
<p>Right Header</p>
</div>
<p class="paddedContent">This is the right column</p>
</div>
<div id="content">
<div id="headerInternal">
<p>Page Context Menu</p>
</div>
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div id="footer">
<p>This footer is absolutely positioned</p>
</div>
</div>
</div>
</body>
</html>
Realmente complicado ... Intenté juguetear con él durante un tiempo. Creo que la raíz del problema es div # contenedor {altura: 100%} – Kasturi
Cuatro años más tarde, esto se hace mucho más fácilmente usando el [modelo CSS de caja flexible] (http://stackoverflow.com/a/26558073/1269037) Todas las otras soluciones son torpes. –