porcentaje de margen superior no cambia cuando la altura de la ventana disminuye

Estoy trabajando en un proyecto en el que el cliente quiere que la navegación <div> se alinee según la altura de la pantalla, similar a como funciona margin-left cuando se reduce el ancho de la pantalla.porcentaje de margen superior no cambia cuando la altura de la ventana disminuye

Así que di margin-top: 20% y la navegación <div> muestra ese margen, pero cuando disminuyo la altura de la ventana no se ajusta según la altura de la pantalla aunque funciona cuando disminuyo el ancho de la pantalla.

Mi pregunta no es cómo puedo lograr eso, pero ¿por qué el porcentaje funciona horizontalmente y no verticalmente?

Aquí es un ejemplo: http://jsfiddle.net/sandeep/5VReY/

Fuente

2011-09-01 sandeep

Muy peculiar, parece como si el 20% estuviera relacionado con el ancho y no con la altura (cuando cambio el ancho, el margen superior cambia), tal vez uno de los monstruos CSS podría responder éste (en realidad podría ser un error). –

@Rikudo; Sí, puede ser un error, pero si alguien me explica por qué no ocurre y le doy un enlace al artículo, es mejor – sandeep

@Rikudo: No es peculiar, es exactamente según la especificación css w3. Ver [w3.org] (http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties) para las especificaciones. – Arjan

Las obras porcentuales en la anchura del bloque de contenedores, de acuerdo con las especificaciones css

El porcentaje se calcula con respecto a la anchura de la generada bloque que contiene la caja. Tenga en cuenta que esto también es válido para 'margin-top' y 'margin-bottom'.

Ver w3.org para obtener más información.

Fuente

2011-09-01 06:22:30 Arjan

Gracias arjan por el enlace :) – sandeep

+36

¿Qué es lo que los chicos en w3c fuman o beben? No puedo creer que un hombre sobrio pueda unir el margen superior y el margen inferior al ancho en lugar de la altura. –

@RomanO, ¿tal vez disparos? – asiniy

Puede reproducir las propiedades de ancho superior e inferior con margin prop en "auto";

Si tiene un bloque como esto:

<div class="centered"></div>

Puede estar centrada verticalmente como esto:

.centered { 
    width: 100px; height: 100px; /* must be present. No matter the value */ 
    position: absolute;   /* to props top/bottom take effect */ 
    margin: auto;    /* here's the magic. */ 

    bottom: 0px; top: 0px;  /* This is how you center a block verticaly */ 
}

Lo mismo se puede lograr para la anchura de la alineación horizontal izquierda/propiedades adecuadas. También puede tener un desplazamiento para ubicar otro punto que no sea el centro del bloque.

Aquí les dejo algunos ejemplos de qué y cómo se puede hacer al combinar estas propiedades. http://jsfiddle.net/SQDJ6/

Fuente

2013-11-05 14:21:31

¡increíble, funciona y es estúpido simple! ¿Tiene alguna estadística sobre el soporte de navegador? –

Esta es una gran pista que resolvió mi problema. – Daniel

porcentaje de margen superior no cambia cuando la altura de la ventana disminuye

Respuesta

Cuestiones relacionadas