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

Posted 2023-03-06

【中文标题】如何使div的百分比宽度相对于父div而不是视口

【英文标题】：How to make div's percentage width relative to parent div and not viewport

【发布时间】：2012-12-01 19:22:45

【问题描述】：

Here is the html I am working with.

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

【问题讨论】：

内部 div 是 position: absolute，这意味着它基本上已从正常的文档流中移除，并且不再是（用于大小/位置计算）#outer 的子级。你可能想试试position: relative

@MarcB 它不再在其父级的流程中，但您关于不是#outer 的子级的评论具有误导性。更准确的描述是它使用绝对或相对定位的第一个父/祖先进行大小/位置计算

【参考方案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>

【讨论】：

感谢您的回答和解释！

我是来做这个解释的！谢谢！

我不知道position: relative 和absolute。 +1！

【参考方案2】：

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

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

【讨论】：

我确实赞成这个答案，只是认为它没有提供足够的解释。教他们钓鱼

我不是专门取笑你。这只是一个幽默的观察。