Q

親子の高さの問題

css

2011-01-15 10 views 0 likes

0

親のdivがposition: relativeで、子の子がposition: absoluteです。そのような位置は必須です。問題は親が子供の高さまで伸びないことです。問題はそれを子供の高さに伸ばす方法です。親子の高さの問題

マークアップは次のようになります。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style> 
      .parent { 
       position: relative; 
       border: solid 1px red; 
      } 

      .child { 
       position: absolute; 
       border: solid 1px red; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <div class="child">Hello World!</div> 
     </div> 
    </body> 
</html>

2011-01-15 Vector

A

答えて

2

は、あなたの親にoverflow:hiddenを追加します。

編集：私の間違いは、子供が浮いている場合のみうまくいきます。これは、子供が絶対的な立場にある場合には達成できません。要素を絶対的に配置するときは、要素をドキュメントフローから取り出します。ポジショニングに関する限り、その要素は意味的には依然として「子」ではなくなりました。

2011-01-15 03:05:06

+0

どのように役立ちますか？私は親を子供の身長に伸ばす必要があります。私はそのコンテンツを隠したくありません... – Vector

+1

'overflow：hidden'の追加は、DOMにhasLayout = trueという要素を通知するので機能します。 DOM要素の多くは、明示的に指示されない限り高さ設定を完全に無視します。 –

+0

http://jsfiddle.net/vhgFn/ – Vector

0

子と親の両方にheight:100%を付けます。

2011-01-15 03:06:37 andrewk

+0

この推測はあまり役に立ちません。 – Vector

+0

これは、両方の要素がブロック（インラインではない）要素である場合にのみ機能します。 –

+0

Divはブロック要素ですが、問題を解決しません。 http://jsfiddle.net/vhgFn/1/をご覧ください – Vector

0

残念ながら、私はJavascriptを使用せずに、それを行う方法はないと思います。

編集：もしあなたがなぜポジションになる必要があるのかを示すと、おそらく、相対的な位置と絶対的な位置を示すことができます。

2011-01-15 03:45:09 sevenseacat

関連する問題