Diseño fluido de CSS: margen superior según el porcentaje crece cuando el ancho del contenedor aumenta

Estoy aprendiendo el diseño receptivo CSS &, y estoy tratando de usar todos los valores porcentuales sin valores de px en un diseño.Diseño fluido de CSS: margen superior según el porcentaje crece cuando el ancho del contenedor aumenta

Hasta ahora parece estar funcionando, pero en un punto, estoy viendo algo que no esperaba. Estoy tratando de poner un margen entre dos divs apilados verticalmente que cambian en función de la altura del contenedor. Esperaría que ese margen cambie cuando cambie el tamaño de la ventana verticalmente, pero también crece si cambia el tamaño horizontalmente, lo que no quiero. ¿Qué me estoy perdiendo?

Aquí hay un violín. Gracias por su ayuda con anticipación.

http://jsfiddle.net/gregir/aP5kz/

Fuente

2012-05-17 Gregir

unidades de ventanilla para CSS vw, vh 1vw = 1% del ancho de la ventana gráfica 1VH = 1% de la altura ventana gráfica – atilkan

En CSS, los cuatro márgenes: y relleno: los porcentajes son relativos al ancho ... aunque eso pueda parecer absurdo. Así es como son las especificaciones de CSS, no hay nada que puedas hacer al respecto.

¿Puedes hacer lo que quieras con 'ex' (o 'em') en su lugar? Esa es la manera en que estoy acostumbrado a ver los valores "fluidos" para margen/relleno especificados ... y puede ser menos problemático que los porcentajes. (Aunque no tengo la experiencia de primera mano relevante, I sospecha las precisiones extremadamente largas sobre sus valores de porcentaje calculados lo van a configurar para problemas de incompatibilidad del navegador más adelante. Mi estilo es limitar los porcentajes de CSS a enteros si al todo posible, o de vez en cuando quizás uno o a veces incluso dos dígitos después del punto decimal.)

Si realmente quiere un espacio vertical vacío de tamaño arbitrario exacto que sea un porcentaje del contenedor, lo primero que se me viene a la mente es un separador vacío < div> con una especificación de CSS "height: nn%". O tal vez alguna otra cosa que especifique ya está manejando los tamaños verticales de la forma que desee (dado que parecería que los márgenes realmente no están haciendo nada en un cambio de tamaño vertical).

Fuente

2012-05-17 03:34:12

Gracias, Chuck. Realmente necesitaba usar valores de porcentaje para los márgenes, ya que la interfaz que estoy construyendo fluctuará ampliamente, de grande a pequeña, y si mis elementos grandes se vuelven muy pequeños pero hay un margen de 1em entre ellos, parece extraño. En los valores de precisión largos, levanté la idea de A List Apart (http://www.alistapart.com/articles/fluid-images/) y no había planeado usar esos en producción. En cualquier caso, su sugerencia es: una div vacía va a funcionar bien; es simple/elegante, y ojalá lo hubiera pensado yo mismo. ¡Gracias de nuevo! – Gregir

http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width –

@Mr. TA - Puedo ver por qué la especificación es la forma en que es. Si los porcentajes de margen superior e inferior se cambiaron para ser relativos a _height_, mientras que los porcentajes de margen izquierdo y derecho permanecían en relación con _width_, no habría forma de especificar márgenes (y relleno) con porcentajes, pero también tendrían _equal_ todo el camino alrededor. (También es la base de un hack CSS extraño para mantener la relación de aspecto de un elemento.) Estas son decisiones difíciles; respire profundo antes de concluir que son simplemente un "defecto de diseño". –

sí, es inesperado y contrario a la intuición, pero funciona como fue diseñado & no tengo idea de por qué funciona como lo hace. Ver margin-top percentage does not change when window height decreases

Fuente

2012-05-17 03:12:44

extraño. Y lamento haberme perdido esto en mi búsqueda de Stack antes. No tengo idea de cómo evitar esto, pero creo que será mejor que me ponga mi gorra de pensar. Gracias. – Gregir

Diseño fluido de CSS: margen superior según el porcentaje crece cuando el ancho del contenedor aumenta

Respuesta

Cuestiones relacionadas