Wie Sie die prozentuale Breite von div relativ zum übergeordneten div und nicht zum Viewport machen können

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>

Was würde Ich mag es geschehen für die innere div 50% der an die Mutter div (äußeren) gegebenen Raum zu besetzen. Stattdessen erhält is 50% des verfügbaren Platzes für das Ansichtsfenster, was bedeutet, dass der Browser/das Ansichtsfenster verkleinert wird.

Angesichts der äußeren div min-width von 2000px, würde ich erwarten, dass die innere div mindestens 1000px breit sein.

Answer 1

eine nicht-statische Position angeben, zB position: absolute/relative auf einem Knoten bedeutet, dass es `darin 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

Position verwenden: relativ zum übergeordneten Element.

Beachten Sie auch, dass, wenn Sie keinem der divs irgendwelche Positionsattribute hinzugefügt hätten, hätten Sie dieses Verhalten nicht gesehen. Juan erklärt weiter.