He estado intentando cambiar la altura de mi mapa de folleto a un porcentaje dentro del elástico de bota pero no dibujará cada vez que hago el mapa. Así, siempre tengo que volver al valor de px. Estoy bastante seguro de que es un ajuste simple que falto ya que soy un novato CSS. Aquí es mi css.
Respuestas
¿Demasiados anuncios?
Dave Moore
Puntos
1633
James Muscat
Puntos
156
El problema es #map es un hijo de body y sólo se puede especificar el porcentaje de la altura de los elementos secundarios, si es de los padres tiene un definido explícitamente altura.
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
height: 480px;
}
#map {
height: 75%;
}
</style>
Esto podría crear lo que usted desea, pero el espacio que nunca va a crecer más del 75% de 480px. Normalmente un div se derrumba cuando no hay un contenido, pero con el Prospecto, a pesar de que su mapa es en la div no se calcula en render, por lo tanto, el colapso en render. Si desea que el contenido que tome todo el espacio vertical, puede consultar el tamaño de la ventana al cargar la página con javascript y establecer la altura de esa manera.
VanOrman
Puntos
2149
Sólo añadir un height:100% a la html y body etiquetas, así que tienen una definida altura y puede ser utilizado como referencia y se debe trabajar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
html, body {
height:100%
}
#map {
margin: 1em auto;
height:70%;
border: 2px dashed black;
}
</style>
</head>
<body>
<h1>The map</h1>
<div id="map"></div>
</body>
</html>
Referencias:
Esta relacionada con la pregunta de Stackoverflow: Porcentaje de la Altura de HTML 5/CSS
Usted también puede dar un vistazo a la W3C CSS 2.1 estándar para ver el modelo de caja y la parte sobre la computación en las alturas y de los márgenes de
Greg Reynolds
Puntos
151
¡ADVERTENCIA! Después de la prueba de navegador Cruz me enteré de que mi respuesta más abajo sólo funcionó para mí en cromo y no en Firefox
Yo tenía el mismo problema y esto con la tabla de la exhibición: en una el div y pantalla mesa-célula principal en cada div gracias a esta respuesta stackoverflow:
Y el css:
