28172 sujets

CSS et mise en forme, CSS3

upload/1533801113-71989-lbc3.png Bonjour, j'essaie en vain de reproduire le design de la messagerie Le bon coin.

J'utilise Bootstrap 3.3.5.

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 l'image de droite) :

- 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 ?
Merci d'avance
Modifié par tony444 (09 Aug 2018 - 09:55)
Administrateur
Hello,

Avec Bootstrap je n'en ai aucune idée. Par contre il existe différentes techniques qui ne me semblent pas incompatibles dans un environnement Bootstrap :

1- la méthode 100% compatible partout : les tableaux HTML de mise en forme, qui font très bien le boulot (et qui peuvent être rendus accessibles et performants assez facilement)

2- la méthode "moderne" : les spécifications CSS Grid Layout (Edge minimum pour être tranquille, sinon IE10 avec diverses précautions : https://www.alsacreations.com/tuto/lire/1771-css-grid-layout-en-production.html )

3- la méthode Flexbox qui nécessitera d'ajouter un conteneur supplémentaire mais qui fonctionnera bien

4- la méthode JavaScript : où l'on calcule en live la hauteur des éléments et on l'adapte.

5- d'autres méthodes plus ou moins alambiquées

Tout dépend donc de tes besoins et de tes visiteurs (et surtout de leurs navigateurs).

Bonne journée Smiley smile
Meilleure solution
Merci Raphaël, je vais utiliser un tableau HTML. Tes infos sont très intéressantes, je vais regarder tout ça.
Bonne journée également Smiley cligne