2013-01-14 10 views
27

のは、私はそうのように、2つのdivを、一方が他方の内側を持っているとしましょう:今"position:absolute" divに相対幅を保持する方法はありますか?

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="width:100%"> 
</div> 
</div> 
</body> 
</html> 

、内側のdivが画面サイズの100%の50%、または画面の50%の幅を有しますサイズ。私はこのように、絶対位置し、内側のdivを変更した場合:この場合

<html> 
<body> 
<div id="outer" style="width:50%"> 
<div id="inner" style="position:absolute;width:100%"> 
</div> 
</div> 
</body> 
</html> 

その位置は絶対に設定されているため、内側のdivは、画面スペースの100%を占めます。

私の質問は次のとおりです。絶対位置に設定されているときに内部divの相対幅を維持する方法はありますか?

答えて

54

ポジションを追加:外部を外部部門に追加します。

更新position: absoluteの位置は、静的以外の位置付けをしている最初の親を基準にしているため、機能します。この場合、そのようなコンテナはなかったので、ページを使用します。

+2

ありがとう!これは約1時間私を迷惑にしていた。私は解決がとてもシンプルだとうれしいよ:) – Charles

+2

OHHH AHHH !!!私は私が取り組んできたこの邪悪なサイトを修正しようとしている最後の5時間を費やしました。これをありがとうございました。なぜこれが機能するのか説明できますか? – Lebowski156

+1

これはトローリングですが、cssは単純な問題を簡単に解決してくれます!ありがとうございました! – mmuller

6

はい。 outerをposition:relativeに設定します。助けのための

http://jsfiddle.net/57673/

.outer 
{ 
    width: 50%; 
    height: 200px; 
    position: relative; 
    border: 1px solid red; 
} 

.inner 
{ 
    width: 100%; 
    position: absolute; 
    height: 100%; 
    border: 1px solid blue; 
} 
+0

ありがとう、Brorと同じ答え!それはすぐに働いた:) – Charles

関連する問題