<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(outer)に与えられたスペースの50%を占めることです。代わりに、ビューポートで使用可能なスペースの50%を取得しています。つまり、ブラウザー/ビューポートのサイズが小さくなると、ビューポートも小さくなります。
外側のdivがmin-width
of 2000px
である場合、内側のdivは少なくとも1000px
幅になると予想されます。
非静的な位置、たとえばノード上の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>
使用位置:親要素の相対。
また、この動作を見ることのないdivに位置属性を追加しなかった場合にも注意してください。フアンはさらに説明します。