jquery - name - outerheight javascript
¿Por qué el porcentaje de altura no funciona en mi div? (2)
Esta pregunta ya tiene una respuesta aquí:
Tengo dos divs con una altura del 90%, pero la pantalla es diferente.
He tratado de poner un div externo alrededor de ellos, pero eso no me ha ayudado. Además, es lo mismo en Firefox, Chrome, Opera y Safari.
¿Alguien puede explicar por qué tengo este problema?
Abajo está mi código:
<div style="height: 90%">
<div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>
<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>
<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
</div>
</div>
Trabajar con la propiedad de
height
CSS y los valores de porcentaje
La propiedad de
height
CSS, cuando se usa con un valor porcentual, se calcula con respecto al bloque que contiene el elemento.
Digamos que su elemento del
body
tiene
height: 1000px
.
Entonces un niño con
height: 90%
obtendría 900 px.
Si no ha establecido una altura explícita para el bloque contenedor (y el elemento secundario no está en una posición absoluta), entonces su elemento secundario con un porcentaje de altura no tendrá nada que seguir y la altura estará determinada por el contenido y otras propiedades.
De la especificación:
10.5 Altura del contenido: la propiedad de
heightporcentaje
Especifica un porcentaje de altura. El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque contenedor no se especifica explícitamente y este elemento no está en una posición absoluta, el valor se calcula como ''auto''.auto
La altura depende de los valores de otras propiedades.
Por lo tanto, si desea utilizar porcentajes de altura en sus divisiones, especifique la altura de todos los elementos principales, incluido el elemento raíz (por ejemplo,
html, body {height:100%;}
)
Tenga en cuenta que
min-height
max-height
no son aceptables.
Debe ser la propiedad de
height
.
Aquí hay un pequeño resumen:
John: Quiero establecer la altura de mi div al 100% .
Jane: ¿ 100% de qué?
John: 100% de su contenedor. Entonces, el padre un nivel más arriba.
Jane: está bien. ¿Y cuál es la altura de los padres del div?
John: no tiene uno. Auto, supongo. Contenido impulsado.
Jane: Entonces, ¿quieres que el div tenga una altura del 100% de una variable desconocida?
John: [silencio]
Jane: Hola John, ¿puedo tener el 50% de eso?
John: ¿ 50% de qué?
Jane: ¡Exactamente!
Jane: los porcentajes son valores relativos. Siempre tienes que preguntar "¿porcentaje de qué?". Al declarar una altura explícita para cada padre hasta elbodyyhtml, establece un marco de referencia para cada niño con un porcentaje de altura, permitiendo que la altura funcione.
Ejemplos
Digamos que desea que un div tenga un 50% de altura de su padre.
Esto no funcionará:
<article>
<section>
<div style="height:50%"></div>
</section>
</article>
Tampoco esto:
<article>
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
Y tampoco lo hará esto:
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
Esto también fallará:
<body style="height:100%">
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
</body>
AHORA, finalmente funcionará:
<html style="height:100%">
<body style="height:100%">
<article style="height:100%">
<section style="height:100%">
<div style="height:50%"></div>
</section>
</article>
</body>
</html>
Y esto también funcionaría:
<article>
<section style="height: 500px">
<div style="height:50%"></div>
</section>
</article>
Pero no esto:
<article>
<section style="min-height: 500px">
<div style="height:50%"></div>
</section>
</article>
Utilizar
100vh
Como puede ver, las alturas porcentuales son un poco complicadas.
Puede evitar la complejidad (es decir, nunca tener que considerar los elementos principales) simplemente usando
alturas de porcentaje de ventana gráfica
.
Siempre que desee que un cuadro tenga la altura de la ventana
height: 100vh
, use
height: 100vh
lugar de
height: 100%
.
No se necesita nada más.
Excepción de posicionamiento absoluto
Como se señala en la especificación , un elemento en posición absoluta es una excepción a la regla para las alturas porcentuales. Más detalles aquí: aplicar 100% de altura a elementos anidados, no flexibles .
Use
vh
(altura de ventana gráfica) en lugar de porcentaje.
Obtendrá la altura del navegador y la dimensionará en consecuencia, por ejemplo
height:90vh;
prueba este código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id ="wrapper">
<div id="tabs" ng-controller="TabsDataCtrl">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>
<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>
<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers"></leaflet>
</div>
</div>
</body>
</html>
con css
<style>
#wrapper{height:60vh;}
#tabs {width:20% float:left; height:60vh; overflow-y:scroll; overflow-x:hidden;}
#leaflet-map{width:78%; height:60vh; overflow-y:scroll; overflow-x:hidden;}
</style>