如何使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而不是视口

回答

相关问题