1485 sujets

Web Mobile et responsive web design

[Résolu] Svg responsive

Bonjour,

Je recherche à inclure un contenu svg dans du html.
Je ne souhaites pas avoir de scroll : mon svg doit être visible intégralement dans toute les situations.
Le svg se trouve en dessous d'une légende qui ne doit pas dépasser 1/4 de la hauteur de mon écran => 25vh.
Le svg doit être étiré pour couvrir la zone la plus grande disponible.

J'y arrive pas trop mal => http://codepen.io/anon/pen/YZjWwr

Néanmoins :
- j'aimerais que dans le cas ou la légende fait moins de 25vh, elle puisse avoir la hauteur de son contenu et non une taille fixe (en pixel ou rem)
- que mon svg couvre l'espace restant


Est-ce qu'il existe une solution à mon soucis sans utiliser de javascript ?
Merci d'avance Smiley biggrin
Bonjour moths-art,

Pour que ta légende soit à hauteur de son contenu tu supprime "height:100px" dans #legend, et pour que ton svg occupe la place restante tu remplaces "height: calc(100vh - 110px);" par "height: 100%;" dans #svg.

Bonne journée
Tu as raison cela ne fonctionne pas et pour le coup j'ai cherché et pris une bonne leçon de CSS...
Il y a plein de topiques sur l'adaptation de la taille des div enfants en hauteur à la taille du div parent, c'est pas un problème nouveau et bref la solution la plus simple que j'ai trouvé est d'utilisé le "display : flex" :

Tu rajoute dans #content : display: flex; flex-direction: column; ,
tu mets donc height: 100%; sur le svg;
et tu enlèves le height: 100px; de legend

Bonne journée,


body {
  overflow: hidden;
  margin: 0;
}
#content {
  display: flex;
  flex-direction: column;
  margin: 5px;
  background: green;
  height: calc(100vh - 10px);
}
#legend {
  max-height: 25vh;
  overflow: auto;
  background: red;
}
svg {
  height: 100%;
  min-height: calc(75vh - 10px);
  width: calc(100vw - 10px);
}
Meilleure solution
Sujet clos
Aller à