Bonjour, j'essaie en vain de reproduire le design de la messagerie Le bon coin.

C'est une mise en page qui me convient très bien au niveau de la disposition des différents blocs et du comportement en cas de redimensionnement de la page mais malgré beaucoup de temps passé je bloque.

Voici ce que j'aimerais obtenir (voir la seconde image) :

• Le bloc 1 (bandeau de gauche) doit prendre toute la hauteur de la page ; les blocs 2, 3 et 4 additionnés font donc la même hauteur que le bloc 1.
• Les contenus du bloc 1 et du bloc 2 doivent être scrollables en hauteur
• Le bloc 3 doit rester toujours en bas de la page, même en cas de redimensionnement de la fenêtre
• Même en cas de redimensionnement de la fenêtre, il n'y a donc pas d'apparition de la barre de scrolling vertical de la page

C'est vraiment pas simple...

Pouvez-vous m'aider SVP ?

-
Edité par tulipe444 9 août 2018 à 9:55:32

Salut,

Si tu connais Bootstrap, alors utilise le en faisant un nouveau conteneur pour tes bloc 2, 3 et 4. Sinon va faire un tour la dessus.

Ou alors tu peux encore utiliser un tableau pour simplifier la chose en séparant les deux colonnes 1 et 2-3-4, mais c'est pas jolie au niveau du code et ce n'est pas très compréhensible au bout de deux moi sans y avoir touché.

Après tu as d'autres options en css mais je ne les connais pas forcément suffisamment pour t'en parler.

En espérant t'avoir aidé !

@+

idem avec boot strap tu auras ce rendu :

<style>
.bottom-column
{
	float: none;
	display: table-cell;
	vertical-align: bottom;
}
</style>

<div class="row">
	<div class="cols-lg-3">
		1
	</div>
	<div class="cols-lg-9">
		<div class="row">
			<div class="col-12">
				4
			</div>
			<div class="col-12">
				2
			</div>
			<div class="col-12 bottom-column">
				3
			</div>
		</div>
	</div>
</div>

le DOM devrais ressembler à un truc comme ça

-
Edité par ox223252 9 août 2018 à 8:59:25