CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 5 · Exercice de TD
La fiche qui déborde
Le modèle de boîte · niveau 2
Énoncé
La fiche d'un livre a été écrite pour un résumé de trois lignes :
body {
margin: 16px;
font-family: system-ui, sans-serif;
}
/* Erreur : une hauteur fixe ne s'adapte pas au texte */
.fiche {
width: 16rem;
height: 120px;
padding: 0 1rem;
border: 1px solid #1f3a68;
}Avec un résumé plus long, le texte sort du cadre (voir la capture de la section sur min-height). Pourquoi overflow: hidden n'est-il pas une bonne correction ? Corriger la règle.
Corrigé
overflow: hidden couperait la fin du résumé : le lecteur ne saurait même pas qu'il en manque une partie. La hauteur fixe est la cause ; on la remplace par une hauteur minimale :
body {
margin: 16px;
font-family: system-ui, sans-serif;
}
.fiche {
width: 16rem;
min-height: 120px;
padding: 0 1rem;
border: 1px solid #1f3a68;
}Les fiches courtes gardent 120 pixels ; celle-ci grandit jusqu'à 185,44 pixels (mesure Chromium) et le paragraphe suivant descend d'autant.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.