Larghezza percentuale per elementi fissi?

Question

Ho html come questo:

<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; 
} 

questo fa sì che il secondo div ad essere un po 'più ampia (40px per l'esattezza) rispetto al primo div, perché il primo del div 70% è rispetto alla larghezza del contenuto (che è al 100% meno il riempimento di 20 px su ciascun lato).

A cosa si riferisce il 70% della seconda divisione? Come potrei fare in modo che i due div siano della stessa larghezza?

Answer 1

ho impostare la larghezza di assoluto utilizzando JavaScript per rilevare la larghezza calcolata di #prima.

Answer 2

Secondo il CSS 2.1 Positioning Scheme spec:

Nel caso di palmare, proiezione, schermo, testo, e tipi di supporti tv, la casella è fissa rispetto alla finestra ...

Questo mi porta a credere che il 70% che stai impostando sia in realtà il 70% del viewport.

Per quanto riguarda la stessa larghezza dell'altro div, forse è possibile utilizzare JavaScript (o specificare esplicitamente le larghezze).

Answer 3

Il primo 70% di div si riferisce al 70% della larghezza di #content.

Il 70% del secondo div si riferisce al 70% della larghezza della finestra.

Se si aggiunge questo CSS, i due div s' sono la stessa larghezza:

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

Live Demo

Answer 4

Questo strano comportamento (grande domanda !!) può essere definito per il fatto che la relativa div (prima) prendi la larghezza guardando suo padre. La seconda guarda la vista, non importa chi sia suo padre (e quale larghezza è impostata per suo padre)!

Questo può risolvere il problema:

body,html{ 
    padding:0; 
} 

Modifica ->Fiddle