Div qui ne veut pas contenir tout mon texte

Résolu/Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - Modifié le 8 nov. 2021 à 13:07
 Asni - 9 nov. 2021 à 02:51
Bonjour,
J'ai une div avec un long texte, mais malheureusement celui-ci ne rentre pas malgré un min-height : 100 %. C'est comme si la div ne pouvait faire plus de 100% de haut.
Mon html :
<div id="intro"><div id="texte">
<h1>Musique</h1>
<img src="images/dmitri.jpg" alt="mannequin" width="1365" height="2048" class="dmitri">
<p>Soufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jellySoufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jelly.</p>
</div> </div>

Mes CSS :
#texte {
width: auto;
height: 100%;
font: bold 13px Arial;
border: none;
color: #fff;
margin-left: 5%;
margin-right: 5%;
padding-top: 80px;
min-height: 100%;
overflow: visible;
padding-bottom: 70px;
}
#intro{
height: 100%;
background: #fff;
width: 100%;
position: static;
margin-top: 100%;
z-index: 99;
min-height: 100%;
overflow: visible;
}


Quelqu'un aurait-il la solution ?
Merci et bonne journée,
E.
A voir également:

1 réponse

Salut,
euh pourquoi vous parlez de valeur minimale alors que vous indiquez des valeurs?
Les DIV que vous présentez font 100% de l'espace disponible(moins les marges et autres place utilisée comme la barre de défilement) donc indiquer une taille minimale identique est simplement inutile et ne sera pas pris en compte:

Definition and Usage

The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Note: This prevents the value of the height property from becoming smaller than min-height.

source: https://www.w3schools.com/CSSref/pr_dim_min-height.asp

Et en effet si un élément fait 100% il ne fait pas plus ou moins.
" C'est comme si la div ne pouvait faire plus de 100% de haut. "
Non ce n'est pas comme mais c'est la valeur(height) que vous indiquez donc il fera la taille indiqué(suivant les règles du flow et des types d'élément utilisé, voir la propriété display).
De plus indiquer qu'un élément fait plus de l'espace disponible n'est pas une bonne chose à faire(ce qui n'est pas le cas ici) car cela en rend une partie simplement inaccessible à l'utilisateur ou complique sa vie en l'obligeant à faire des opérations supplémentaire pour avoir accès à ce qui lui est présenté et tenir compte de l'utilisateur/destinataire d'un publication doit être la 1ère priorité...à moins que le site ne soit fait que pour vous ce qui serait curieux.

Autre remarques:
Vous incrustez 2 div l'un dans l'autre alors que ça n'a aucune utilité à part vous compliquer la vie en établissant 2 jeux de règles de styles qui peuvent être regroupés en un, tout comme l'élément HTML(2 DIV qui se contiennent l'un l'autre et ne sont pas utilisé pour mise en page puisque les 2 font 100% et qu'au delà de 100% il n'y a plus de page pour mettre en forme...).

Le DIV en HTML5 est à éviter pour de éléments qui ont un sens sémantique(voir section et article) et réserver les DIV pour des éléments qui n'ont aucune valeur sémantique(donc pas du texte, une image ou un contenu qui peut être identifié avec sa qualité).
Un DIV en gros est à éviter sauf si vous parlez d'un élément décoratif.

Votre texte est plutôt incohérent car il s'agit d'une énumération de mots sans vrai sens(pas de phrase, pas de message réel autre que les mots en eux-même). Si le but est de référencer ces mots ce sera contre-productif car interdit et sanctionné par les robots.

Vous devez pour un référencement correct en plus d'utiliser élément et structure adapté(donc pas de div) faire au contraire des phrases cohérentes pour un contenu texte qui apporte quelque chose à la page. Donc correctement rédiger vos contenus et correctement les intégrer en HTML ce qui n'est pas le cas.
Sinon vous pouvez voir du côté des nuages de mots mais ça revient à les lier à un contenu qui lui sera un contenu qui a du sens(rédigé correctement pour un texte).
1
vous indiquez :
margin-top: 100%;


ce qui a donc pour effet de rendre le contenu constamment hors de la page. Il sera donc invisible dans tous les cas, ce qui me ramène à l'idée que vous voulez tricher avec les moteurs de recherches ce qui n'est pas rentable et amène à des mises en page illogique. Vous ne pourrez vraiment tricher puisque ce sont les contenus correctement répertoriés et hiérarchisés(les 2 par HTML) ainsi que visible dans la page qui seront référencés.
En clair vous devez mettre de vrais contenus et pas des mots clés sans aucun sens comme ici. Les mots clés c'est très bien mais vous devez les intégrer à un texte cohérent et les identifier/hiérarchiser autant que possible(paragraphes et titres cohérents, contenus originaux et de qualité... c'est un bon départ).
0