Procentowa szerokość dla stałych elementów?

Question

mam HTML jak poniżej:

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

powoduje drugi div być nieco szersza (40px być dokładnie) niż pierwszy div, ponieważ pierwszy div jest 70% w stosunku do szerokości danej treści (który jest 100% minus dopełnienie 20 pikseli po każdej stronie).

Do czego odnosi się 70% drugiego div? Jak mogłem to zrobić, aby dwa elementy div miały tę samą szerokość?

Answer 1

ustawić absolutną szerokość przy użyciu javascript, aby wykryć obliczoną szerokość #first.

Answer 2

Według CSS 2.1 Positioning Scheme spec:

W przypadku podręcznych, projekcji, ekranie terminala oraz typów mediów tv, skrzynka jest ustalana w odniesieniu do rzutni ...

To prowadzi mnie do przekonania, że ​​70% ustawienia to w rzeczywistości 70% widoczności.

Jeśli chodzi o to, że jest to ta sama szerokość co inne div, być może można użyć JavaScript (lub jawnie określić szerokości).

Answer 3

Pierwsze 70% liczby div dotyczy 70% szerokości #content.

Drugie 0,02% odnosi się do 70% szerokości rzutni.

Jeśli dodać to CSS, dwa div „s są tej samej szerokości:

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

Live Demo

Answer 4

To dziwne zachowanie (wielkie pytanie !!) może być określone co do faktu, że względna div (pierwszy) przyjmij szerokość patrząc na ojca. Drugi po prostu patrzy na rzutnię, bez względu na to, kto jest jej ojcem (i jaką szerokość ustawia się na ojca)!

ten może rozwiązać problem:

body,html{ 
    padding:0; 
} 

Edycja ->Fiddle