2012-12-13 57 views
36

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-width2000px,我期望内部股利至少是1000px宽。

+2

内的div是绝对定位元素的参考' position:absolute',这意味着它基本上从正常的文档流中被移除,并且不再(用于大小/位置计算)#outer的孩子。你可能想尝试'position:relative' –

+2

@MarcB它不再处于其父项流程中,但是你关于不成为#outer子项的评论是有误导性的。更准确的描述是,它使用绝对或相对定位的第一个父/祖辈来计算大小/位置 –

回答

47

指定节点上的非静态位置,例如,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>

+1

谢谢你的回答,并解释! – sean

+1

我来这里解释!谢谢! –

+0

我不知道'position:relative'和'absolute'。 +1! – Cullub

9

使用位置:相对于父元素。

另外请注意,如果你没有添加任何位置属性的任何div你不会看到这种行为。 Juan进一步解释说。

+10

有时我觉得像stackoverflow的答案就像价格是正确的。一个人给出了正确的答案。下一个人给出解释的答案。接下来给出答案,解释和演示。我会赌501,鲍勃! – William

+2

我确实收到了这个答案,只是没有认为它提供了足够的解释。教他们钓鱼 –

+0

我不是专门给你打趣。这只是一个幽默的观察。 – William

相关问题