CSS：絶対位置指定子

Question

の高さにフィット相対位置の親は、私はシンプルなスライドショーを構築しようとしています。これまでのところ、基本的なマークアップは次のようになります。

<h1>My Slideshow</h1> 

<p>This paragraph behaves as expected.</p> 

<div class="slide-container"> 
    <div class="slide"> 
    <h2>First Slide</h2> 
    <p>Some stuff on this slide…</p> 
    </div> 

    <div class="slide"> 
    <h2>Second Slide</h2> 
    <p>And some more stuff here…</p> 
    </div> 
</div> 

<p>This paragraph will disappear beneath the stacked images.</p> 

これは、対応するCSSです：

.slide-container { 
    position: relative; 
} 

.slide { 
    position: absolute; 
    top: 0; 

    /* just for the looks */ 
    width: 20em; 
    padding: 0 1em; 
    border: 1px solid steelblue; 
    background: white; 
} 

問題は.slide-containerはその子（または子供）の高さに合わないということであり、​​（スクリーンショットを参照）。

私は私が手動で.slide-containerの高さを設定することができます知っている、しかし、私は、高さが可変である流体グリッド、でこれを載せていきたいと思います。これを達成する方法はありますか？

Answer 1

絶対-位置のアイテムは、親に論理的に関連はなく、「物理的に」されています。それらはレイアウトの一部ではないので、親アイテムは実際の大きさを実際に見ることができません。自分でサイズをコード化するか、JavaScriptでそれを嗅ぎ取り、実行時に設定する必要があります。

Answer 2

あなたは、この使用してjQueryのを使用することができます。

function sliderheight(){ 
     divHeight = $('.slide').height(); 
     $('.slide-container').css({'height' : divHeight}); 
    } 
    sliderheight(); 

これは、「スライド」のdivと同じ高さを持っているために「スライドコンテナのdiv要素のサイズを変更します。

あなたは、「サイズを変更」イベントの発火に関数を呼び出すことによって、それが応答することができます：

$(window).resize(sliderheight); 

・ホープ、このことができます。これを行うための

Answer 3

完璧な方法は絶対子供に合わせて、すなわち高さ&幅相対的な親の寸法を設定することです。

http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

この男は、CSSのポジショニングの基礎を理解するのに十分な書きました。実際には、相対親はすべての絶対的子を論理的に配置するために使用されます。しかし、それは相対的な子供をカバーするためにそれ自身伸びない結果として物理的な位置を共有していません。