HTML divに完全に別のdivを含める必要があります

Question

私の目的は、滑らかなスライダーをkenwheelerで使用してフルスクリーンオーバーレイ画像スライダーを構築することです。

すでにdiv（div2）内にこのdivの周りにいくつかの余白があるフルスクリーンオーバーレイ（div1）があります。私の問題への今

：
私はDIV2のサイズのDIV2は独立にスライダー（DIV3）を載せていきたいと思います。 スライダの幅が広く、高さが低い場合、上部と下部に大きな間隔があります。スライダの高さが高く、幅が狭い場合は、左右に大きな間隔があります。私はすでに持っているものだ

は：

#div1{ 
 
\t position: fixed; 
 
\t display: block; 
 
\t 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t 
 
\t z-index: 9999; 
 
\t 
 
\t background-color: rgba(0,0,0,.7); 
 
} 
 
#div2{ 
 
\t margin: 20px; 
 
\t margin-bottom: 100px; 
 
\t 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t background: green; 
 
\t \t \t \t 
 
\t display: flex; 
 
\t align-items: center; 
 
} 
 
#div3{ 
 
\t width: auto; 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
\t 
 
    background: blue; 
 
} 
 
#div3 div{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t 
 
\t margin: 0 auto; 
 
} 
 
#div3 div img{ 
 
\t display: block; 
 
\t margin: auto; 
 
\t 
 
\t height: auto; 
 
\t max-height: 100%; 
 
\t 
 
\t width: auto; 
 
\t max-width: 100%; 
 
}

<div id="div1"> 
 
    <div id="div2"> 
 
    \t <div id="div3"> 
 
    \t \t <div><img src="images/models/own/001_racecar/P02.png" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P03.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P04.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P05.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P06.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P07.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P08.JPG" alt=""></div> 
 
    \t \t <div><img src="images/models/own/001_racecar/P09.JPG" alt=""></div> 
 
    \t </div> 
 
    </div> 
 
</div>

私が説明するのに非常に良いではないだと、知っています。質問がある場合は、私に尋ねてください。
私があなたを助けてくれることを願っています。

おかげ
トビアス・ウォルド

Answer 1

申し訳ありませんが、私はあなたが間違っていましたが、何がしたいのスライダーがあなたのケースとDIV2には、親のdivすなわち、DIV2の内側に常にあることを確認するのは、スライダーのコンテンツと一緒に成長する必要があります。私は正しい？

「コンテナ」クラスのブートストラップを使用して行うことができます。私はそれのための簡単なjsfiddleを作った。それが動作するかどうか私に教えてください。

https://jsfiddle.net/94kt3mwd/1/

<div id="div1" class="container col-lg-12 col-sm-12 col-xs-12 col-md-12" style= "background-color:#ff0;padding:2%"> 
    <div id="div2" class="container" style="background-color:#00f" align="center"> 
    <h1> 
    HELLO! Add Text Here.. 
    </h1> 
    </div> 
</div> 

それがお役に立てば幸いです。