Ancho de porcentaje para elementos fijos?

Question

tengo html como esto:

<div id='content'> 
    <div id='first'>...</div> 
    <div id='second'>...</div> 
</div> 

#content 
{ 
    width:100%; 
    position:relative; 
    padding:20px; 
} 

#first 
{ 
    width:70%; 
    position:relative; 
} 

#second 
{ 
    width:70%; 
    position:fixed; 
} 

Esto hace que el segundo div a ser un poco más ancha (40 píxeles para ser exactos) que la primera div, porque de la primera div 70% es con respecto a la anchura del contenido (que es 100% menos el relleno de 20px en cada lado).

¿A qué se refiere el 70% del segundo div? ¿Cómo podría hacerlo para que los dos divs tengan el mismo ancho?

Answer 1

que configure la anchura absoluta usando javascript para detectar la anchura calculada de #Primer.

Answer 2

Según la CSS 2.1 Positioning Scheme spec:

En el caso de la computadora de mano, proyección, pantalla, TTY, y los tipos de medios de comunicación de televisión, la caja se fija con respecto a la ventana gráfica ...

Esto me lleva a pensar que el 70% que está configurando es en realidad el 70% de la ventana gráfica.

En cuanto a que sea del mismo ancho que el otro div, quizás podría usar JavaScript (o especificar anchos explícitamente).

Answer 3

El 70% de la primera div se refiere al 70% del ancho de #content.

El 70% de la segunda div se refiere al 70% del ancho de la ventana gráfica.

Si se agrega esto CSS, los dos div 's son del mismo ancho:

html, body { 
    margin:0; padding:0 
} 

Live Demo

Answer 4

Este comportamiento extraño (gran pregunta !!) puede hacer referencia sobre el hecho de que el pariente div (primero) toma el ancho mirando a su padre. El segundo solo mira la ventana gráfica, sin importar quién es su padre (¡y qué ancho está configurado para su padre)!

Esto se puede arreglar el problema:

body,html{ 
    padding:0; 
} 

Editar ->Fiddle