如何使 div 的百分比宽度相对于父 div 而不是 viewport

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

小开

最佳答案

指定一个非静态位置，例如，节点上的 position: absolute/relative意味着它将被用作 http://jsfiddle.net/E5eEk/1/中绝对定位元素的参考

参见 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts

我们可以改变定位上下文ーー绝对定位元素相对于哪个元素定位。这是通过在元素的祖先之一上设置定位来完成的。

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