73

これが私が使用している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％を取得しています。つまり、ブラウザ/ビューポートのサイズが小さくなると、サイズも小さくなります。

min-width外側のdivがのを持っていることを考えると、内側のdivは2000px少なくとも1000px幅が広いと思います。

4

2 に答える 2

80

たとえばノード上で非静的位置を指定するposition: absolute/relativeことは、ノード内の絶対位置の要素の参照として使用されることを意味しますhttp://jsfiddle.net/E5eEk/1/

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contextsを参照してください

ポジショニングコンテキストを変更できます—絶対的に配置された要素が相対的に配置される要素。これは、要素の祖先の1つに位置を設定することによって行われます。

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

于 2012-12-13T20:19:45.760 に答える
19

位置を使用：親要素の相対。

また、どのdivにも位置属性を追加しなかった場合、この動作は見られなかったことにも注意してください。フアンはさらに説明します。

于 2012-12-13T20:17:04.410 に答える