如何使div的百分比寬度相對於父div而不是視口

Here is the HTML I am working with。如何使div的百分比寬度相對於父div而不是視口

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

我想發生這樣的是內部的div佔據給予其父DIV（外）的面積的50％。取而代之的是，獲得視窗可用空間的50％，這意味着隨着瀏覽器/視口的大小縮小，它也是如此。

鑑於外部股利有min-width的2000px，我期望內部股利至少是1000px寬。

來源

2012-12-13 sean

內的div是絕對定位元素的參考' position：absolute'，這意味着它基本上從正常的文檔流中被移除，並且不再（用於大小/位置計算）#outer的孩子。你可能想嘗試'position：relative' –

@MarcB它不再處於其父項流程中，但是你關於不成爲#outer子項的評論是有誤導性的。更準確的描述是，它使用絕對或相對定位的第一個父/祖輩來計算大小/位置 –

指定節點上的非靜態位置，例如，position: absolute/relative意味着它將被用作在其內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>

來源

2012-12-13 20:19:45

謝謝你的回答，並解釋！ – sean

我來這裏解釋！謝謝！ –

我不知道'position：relative'和'absolute'。 +1！ – Cullub

使用位置：相對於父元素。

另外請注意，如果你沒有添加任何位置屬性的任何div你不會看到這種行爲。 Juan進一步解釋說。

來源

2012-12-13 20:17:04 William

+10

有時我覺得像stackoverflow的答案就像價格是正確的。一個人給出了正確的答案。下一個人給出解釋的答案。接下來給出答案，解釋和演示。我會賭501，鮑勃！ – William

我確實收到了這個答案，只是沒有認爲它提供了足夠的解釋。教他們釣魚 –

我不是專門給你打趣。這只是一個幽默的觀察。 – William

如何使div的百分比寬度相對於父div而不是視口

回答

相關問題