Sposób tworzenia procentowej szerokości elementu div względem nadrzędnego elementu div, a nie widoku:

Question

Here is the HTML I am working with.

<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;"> 
 
    <div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;"> 
 
    <div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div> 
 
    </div> 
 
</div>

Jakie chciałbym się zdarzyć jest wewnętrzna div zajmują 50% powierzchni danego jej div (zewnętrznej). Zamiast tego uzyskuje 50% dostępnej przestrzeni na rzutni, co oznacza, że ​​wraz z kurczeniem się przeglądarki/rzutni, robi się to samo.

Biorąc pod uwagę, że zewnętrzny element div ma min-width z 2000px, oczekiwałbym, że wewnętrzny element div będzie miał co najmniej szerokość 1000px.

Answer 1

Określanie niż pozycja statyczna, np position: absolute/relative w węźle oznacza, że ​​będzie on używany jako odniesienie dla całkowicie umieszczone elementy w go http://jsfiddle.net/E5eEk/1/

#outer { 
 
    min-width: 2000px; 
 
    min-height: 1000px; 
 
    background: #3e3e3e; 
 
    position:relative 
 
} 
 

 
#inner { 
 
    left: 1%; 
 
    top: 45px; 
 
    width: 50%; 
 
    height: auto; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
#inner-inner { 
 
    background: #efffef; 
 
    position: absolute; 
 
    height: 400px; 
 
    right: 0px; 
 
    left: 0px; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    <div id="inner-inner"></div> 
 
    </div> 
 
</div>

Answer 2

Użyj pozycji: względna na elemencie nadrzędnym.

Zauważ, że gdybyś nie dodał żadnych atrybutów pozycji do żadnego z elementów div, nie zauważyłbyś takiego zachowania. Juan wyjaśnia dalej.