html - 如何使div的百分比宽度相对于父div而不是视口

Question

这是我正在使用的 HTML。

<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%，这意味着随着浏览器/视口的尺寸缩小，它也会缩小。

鉴于外部 div 具有min-width，2000px我希望内部 div 至少是1000px宽的。

Answer 1

指定一个非静态位置，例如，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>

Answer 2

在父元素上使用 position: relative 。

另请注意，如果您没有向任何 div 添加任何位置属性，您将不会看到此行为。胡安进一步解释。