Mi <body /> tiene un <ion-nav-bar /> y un <ion-nav-view />. Dentro de <ion-content /> de un <ion-view />, Me gustaría agregar un <div /> que toma el ancho y la altura de toda la pantalla (es decir, cubre totalmente todos los demás elementos), así que agregué el siguiente estilo:
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
Curiosamente, la parte superior de la <div /> no llega a la parte superior de la pantalla, sino a la parte inferior de la pantalla <ion-nav-bar />. ¿Alguna idea de por qué?
Aquí hay un saqueador con el que puedes jugar: http://plnkr.co/edit/q2iynXaMnTZ2fGqzlJZo. Verá que el borde rojo no cubre el encabezado. Observe el home.html y el style.css archivos.
Debo haber entendido mal algo sobre elposición fija, pensé que el ancho de una posición fija, un elemento se coloca en relación con la ventana del navegador. Entonces, ¿dónde me equivoco? Y como arreglar mi <div /> tomar toda la pantalla?
Respuestas
0 para la respuesta № 1Sin embargo, su comprensión es correcta cuando usa transform en un antepasado, un descendiente de posición fija se coloca en relación con él.
Entonces, porque esto (antepasado de su elemento fijo):
<div style="transform: translate3d(0px, 0px, 0px) scale(1);" class="scroll padding">
Esta usando transform, las coordenadas de los elementos fijos son relativas al tamaño de este div. Si eliminara la transformación, obtendría los resultados esperados.