Partage
  • Partager sur Facebook
  • Partager sur Twitter

Une div qui s'adapte en hauteur, possible ou pas ?

Sujet résolu
18 octobre 2013 à 17:49:24

Bonjour,

une question que je poste dans le forum lié au CSS, mais je ne sais pas si je peux solutionner mon soucis sans passer par du JavaScript, mais j'esaaie quand même ...

En fait ce que je cherche à faire est très simple : c'est d'avoir un bloc qui s'adapte en hauteur à la taille de l'écran, donc un bloc qui occupera toujours de haut en bas l'écran, quelque soit le support (ordinateur, tablette ...)

Est-ce possible en CSS selon vous ? Merci ...

  • Partager sur Facebook
  • Partager sur Twitter
18 octobre 2013 à 17:57:59

Salut,

Avec min-height en CSS c'est possible oui.

Tu peux aussi utiliser des % en unités de valeur. En indiquant 100% la taille de ton div s'ajustera à la totalité de la hauteur de l'écran du visiteur.

-
Edité par Jejeleponey 18 octobre 2013 à 18:01:13

  • Partager sur Facebook
  • Partager sur Twitter
www.bestserv.net - Serveurs de jeux et mumble gratuit !
18 octobre 2013 à 18:13:03

je viens de faire les test, cette solution ne marche pas (je savais bien que c'était pas aussi simple que ça)

avec :

#div{
width: 300px;
min-height: 300px;
background-color: green
}

aucun changement, ma div fait 300px de haut, et avec :

#div{
width: 300px;
height: 100%;
background-color: green
}

là, elle disparait carrément, donc si la solution existe en CSS, s'en est une autre ...

  • Partager sur Facebook
  • Partager sur Twitter
18 octobre 2013 à 18:30:20

Bonsoir,

Il faut bien mettre 100% en hauteur à ta div, mais pour que ce pourcentage s'appuie sur qqchose, il faut ajouter:

html,body{
  height:100%;
  margin:0;
  padding:0;
}

html et body sont les ancêtres de ta div et s'ils ne se sont pas vu attribuer de taille (celle de l'écran), ils ne peuvent pas la transmettre aux enfants.

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
18 octobre 2013 à 18:43:36

Super, j'ai essayé, ça marche, merci pour vos réponses, et pour ta solution philiga (en + avec explication !)

Il y a quelques temps, j'avais posé la même sur ce même forum, et j'avais eu comme réponse qu'il fallait passé par du JavaScript.

Je me suis dis qu'il devais quand même y avoir une solution en CSS et que j'allais retenter le coup : j'ai bien fais !

Merci encore ...

  • Partager sur Facebook
  • Partager sur Twitter
18 octobre 2013 à 19:07:14

Oui, il ne faut pas forcément se laisser convaincre par les réponses trop radicales et définitives ;

C'est là un piège classique, mais pas très souvent explicité, mais en effet, il serait bien étrange que le css seul ne le permette pas.

En tous cas, tu as bien fait de te fier à ton intuition et de reposer la question ; ça pourra éviter quelques calvities à d'autres...

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
18 mai 2017 à 22:49:18

Bonjour, c'est bien de remercier les personnes qui vous ont aidées, merci à vous, mais le fait de poster un nouveau message fait remonter le sujet. Il est préférable de cliquer sur le pousse lever pour liker le(s) message(s) qui vous a(ont) aidé(s).

Je ferme pour éviter un nouveau déterrage.

  • Partager sur Facebook
  • Partager sur Twitter