Margen superior: 100% obtiene el valor del ancho del padre ... extraño

Tengo un "problema" muy extraño, en la mayoría de los navegadores (es decir, ff, cromo, safari). Aquí es código de ejemplo:Margen superior: 100% obtiene el valor del ancho del padre ... extraño

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
     html{ 
      outline: 1px #0ff solid; 
      background: rgba(0,255,255,0.1); 
     } 
     body{ 
      margin: 0; 
      padding: 0; 
      outline: 1px #00f solid; 
      background: rgba(0,0,255,0.1); 
     } 
     #aDiv{ 
      width: 300px; 
      outline: 1px #f00 solid; 
      background: rgba(255,0,0,0.2); 
     } 
     #bDiv{ 
      margin-top: 100%; 
      outline: 1px #0f0 solid; 
      background: rgba(0,255,0,0.1); 
     } 
    </style> 
</head> 
<body> 
    <div id="aDiv"> 
     <div id="bDiv"> 
      content 
     </div> 
    </div> 
</body> 
</html>

cuando se cambia la anchura #aDiv, entonces #bDiv margin-top va a cambiar con el mismo valor. No sé cómo es posible, esa altura va al ancho. De todos modos, tal vez alguno de ustedes podría explicarme qué está pasando.

Saludos;)

Fuente

2011-10-05 Artnova Art

Esto es en realidad according to the spec

<porcentaje> El porcentaje se calcula con respecto a la anchura de bloque de contención de la caja generada. Tenga en cuenta que esto también es válido para 'margin-top' y 'margin-bottom'. Si el ancho del bloque contenedor depende de este elemento, el diseño resultante no está definido en CSS 2.1.

Bastante inútil, ¿verdad? ¿Ha considerado usar position: absolute y bottom: 0? Es posible que sean más de lo que estás buscando.

Fuente

2011-10-05 13:04:07

Estaba trabajando en algo bastante diferente, sin embargo, dado que los navegadores no siempre funcionan como se esperaba, estaba probando atributos totalmente aleatorios, como margen superior: 100% es un poco tonto. Y obtengo una colateración extraña entre el margen (vertical) margen-superior/margen-inferior y ancho (horizontal). Como dijiste, bastante inútil;) –

Lamentablemente, cumple con la norma, pero buena suerte. –

qué tipo de idiota pone esto en el estándar ... eso es ... casi increíblemente estúpido, basando porcentajes verticales en valores horizontales. – Noishe

#bDiv{ 
     margin-top: 100%; --> This need to change 
     outline: 1px #0f0 solid; 
     background: rgba(0,255,0,0.1); 
    }

No es un tema extraño. Es porque ha establecido margin-top al 100%, ya que aDiv es el padre de bDiv toma el ancho de aDiv como margin-top.

Fuente

2011-10-05 13:03:26

estaba claro para mí cómo eliminar este problema, sin embargo, tenía curiosidad acerca de la razón, por qué el porcentaje vertical obtiene el valor del ancho padre horizontal. No tiene sentido ... –

Es todo que ver con el CSS en bDiv tener margin-top: 100%;

Si se quita esto, todo actúa normal de nuevo.

Fuente

2011-10-05 13:06:52 Luke

me resultó claro cómo eliminar este problema, sin embargo tenía curiosidad sobre la razón, por qué el porcentaje vertical obtiene valor del ancho padre horizontal. No tiene sentido... –

Por favor, consulte la respuesta de Kasun – Luke

Puede probar unidades relativas de ventana gráfica (1vw = 1% del ancho de la ventana gráfica, 1vh = 1% de la altura de la ventana gráfica).

Probado margin-top: 90vh;?

Fuente

2015-01-21 21:47:08 cptstarling

gracias amigo, tengo que usar estos valores más! – domiSchenk

Margen superior: 100% obtiene el valor del ancho del padre ... extraño

Respuesta

Cuestiones relacionadas