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
宽。
内的div是绝对定位元素的参考' position:absolute',这意味着它基本上从正常的文档流中被移除,并且不再(用于大小/位置计算)#outer的孩子。你可能想尝试'position:relative' –
@MarcB它不再处于其父项流程中,但是你关于不成为#outer子项的评论是有误导性的。更准确的描述是,它使用绝对或相对定位的第一个父/祖辈来计算大小/位置 –