Positionnement Dynamique Divs

Question

Je travaille sur un site où j'ai deux divs fixes sur le dessus. Le premier est juste une petite barre d'en-tête. La seconde contient une image codée pour être réactive.

J'ai besoin d'ajouter une troisième div qui se place dynamiquement sous la deuxième div en fonction de la taille de la fenêtre. J'ai beaucoup cherché autour de moi et la meilleure option est d'ajouter soit un remplissage avec des pixels, soit un espaceur qui règle la hauteur en pixels. Cela ne fonctionne pas pour moi puisque sur un appareil mobile l'espace entre les deux divs est trop grand.

Toute aide est appréciée.

.one { 
width: 100%; 
position: fixed; 
top: 0; 
left: 0; 
float: left; 
background-image:url(assets/img/bg/bg2.jpg); 
z-index: 3;} 

.two { 
width: 100%; 
position: fixed; 
top: 75px; 
left: 0; 
float: left; 
z-index: 0; } 

.three { 
width: 100%; 
height:200px; 
position: relative; 
float: left; 
z-index: 2;} 

<div class="one"> 
<img src="assets/img/logo.png"> 
</div> 
<div class="two"> 
<img src="assets/img/bg/intro.jpg" class="img-responsive"> 
</div> 
<div class="three">This div needs to always find the bottom of the responsive div two</div> 

Answer 1

Regardez dans media queries. Vous devrez écrire des règles CSS qui placent les divs en fonction de la taille en pixels de la fenêtre. Vous pouvez écrire une règle qui, si la fenêtre est inférieure à un certain seuil de pixels, modifie les règles de placement de vos divs.

Answer 2

Je mettrais les deuxième et troisième divs dans un autre div et lui donner un affichage: bloc; Je pense que c'est ce que vous cherchez.