html - css高度填滿 - 如何使div的百分比寬度相對於父div而不是視口



div固定高度 (2)

這是我正在使用的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-width2000px ,我希望內部div至少為1000px寬。

https://src-bin.com


Answer #1

在父元素上使用position:relative。

另請注意,如果您沒有向任何div添加任何位置屬性,您將不會看到此行為。 胡安進一步解釋。


Answer #2

在節點上指定非靜態位置,例如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>





css-position