Adapter la hauteur de mes div aux dimensions de l'écran

Bonjour,

je suis sur la conception sur la v2 de mon site, (et vu que moi et le css ça fait deux) je me retourne vers vous pour une petite aide.

J'aimerai que mes deux bloc de droite s'adapte à l'écran de l'utilisateur, depuis mon pc le rendu est plutot pas mal et c'est à peu près le rendu que je veux :

Sur un écran plus grand , il y a un gro espace entre le bloc "aperçu du t'chat" et le footer.

Merci de votre futur aide

( Si par la même occaz je peux optimisé mon css, je suis preneur )
Modifié par CWick (03 Aug 2016 - 01:02)

Bonjour,

La solution est à rechercher auprès de `display:flex`, il faudra aussi un `min-height:100vh` sur l'élément parent, body par exemple.

Un exemple en ligne : CodePen

Bonjour,

je pourrai avoir un exemple depuis mon css?

j'ai testé sans succès, je dois mal renseigner mes blocs css.

du coup, je pense qu'il faudrait que les 3blocs s'adapte (celui du formulaire, bloc des connectés et apercu du t'chat )

merci

CSS : http://pastebin.com/0NDKzP5y
Modifié par CWick (01 Aug 2016 - 16:37)

Salut

Je pense que tu devrais déclarer les dimensions en vw (viewport width) et vh (viewport height).

1vw = 1% de la largeur affichée
1vh = 1% de la hauteur affichée

Cela aura pour effet de redimensionner tes DIV quand l'écran change.

Attention, tu devras déclarer certaines de tes hauteurs en "vw" pour que tes DIV restent proportionnelles quand cela s'avère nécessaire. Je ne suis pas un as du css mais j'ai découvert le viewport il y a peu et c'est vraiment magique pour le responsive
Modifié par Somah (01 Aug 2016 - 17:32)

Salut,

Merci de vos réponses mais j'aimerai avoir un exemple concret si cela s'avère possible.

Au plaisir.

Ton code :

#left {
    width: 350px;
}

Ce que tu devrais essayer :

#left {
    width: 15vw;
}

Sachant que 15vw est totalement arbitraire ici. Tu fais quelques test avec différentes valeurs de vw et tu gardes celle qui te convient. Pareil pour les autres DIV
Modifié par Somah (01 Aug 2016 - 17:42)

Désolé, mais je suis actuellement au travail et je n'aurais guère le loisir de reprendre votre code les jours qui viennent. Penchez-vous un peu sur les spécifiquations flexbox, vous ne perdrez pas votre temps.

@somah : je déconseille l'utilisation des unitées viewports dans ce cas de figure car si le code s'adapte à la résolution de l'ecran il ne prend pas en compte le contenu. On pourra bidouiller avec ce système, sans plus.
Modifié par Olivier C (01 Aug 2016 - 21:30)

Exactement , la div s'adapte à l'écran mais pas le contenu .

Si quelqu'un a du temps pour regarder le code , ça serait top !

Bonjour !

Je ne pense que ce soit la bonne façon de voir les choses. A l'heure actuelle, les tailles des écrans sont très variables. On ne peut pas s'attendre à ce que cela s'affiche pareil quel que soit l'écran. Si il n'y a pas assez d'espace en largeur pour du texte, celui-ci doit pouvoir déborder en hauteur. C'est la philosophie derrière le CSS : priorité au contenu.

Plus important que le design est la visibilité, la lisibilité du texte.

Hello,

J'aimerai au moins limité un peu la casse ! Pas que ce soit adaptable à 100%

Salut,
je pense que si tu désactive les fonctions bottom left et position absolute pour ton footer en mettant une hauteur de base dans ton body cela supprimera le si grand espace entre ton tchat et le dit footer.Fais juste attention de recadrer ton img de fond du coup

Re,

j'ai avancé un peu avec les flexbox

pas encore au point, mais ça avance..
Modifié par CWick (03 Aug 2016 - 01:03)