Maison  >  Questions et réponses  >  le corps du texte

Comment garantir une couverture complète du texte défilant lors de l'utilisation de la propriété CSS « Débordement : défilement » sur un div

<p>Je suis nouveau dans la programmation et j'essaie actuellement de créer un site Web simple d'une page en utilisant HTML/CSS et JS. J'ai une classe CSS appelée 'general_container' dans laquelle j'écris du texte, qui est également défini en CSS comme 'div_text' (le code pour les deux est fourni ci-dessous) : </p> <pre class="brush:php;toolbar:false;">.general_container{ marge : min(1vw,1vh) min(1vw,1vh); affichage : flexible ; hauteur : contenu d'ajustement ; largeur : ajustement du contenu ; largeur maximale : 100 % ; hauteur maximale : 80vh ; position : relative ; remplissage : min(1vw,1vh) ; couleur de la bordure : #232323 ; style de bordure : solide ; largeur de bordure : 0,2 rem ; rayon de bordure : 1rem ; aligner les éléments : centre ; justifier-content:center; overflow-x : caché ; débordement-y : auto ; } .div_texte { taille de police : calc(12px + 1,5vw); couleur : #F2F2F2 ; position : relative ; }</pré> <p>Le problème survient lorsque le texte est volumineux par rapport au div dans lequel il se trouve : en utilisant la taille de police définie ci-dessus, sur ma résolution native (2560x1440) le texte est masqué et accessible via la barre de défilement. Cependant, le haut de la barre de défilement n'affiche pas le début du texte comme le montre l'image ci-dessous (j'ai utilisé un texte d'espace réservé générique). </p> <p>Je suppose que les tailles de police dynamiques et les contraintes sur les tailles div sont la cause de ce comportement, mais je ne sais pas comment y remédier. </p> <p>Image avec texte non accessible via la barre de défilement</p> <p> J'ai essayé de modifier les contraintes et les propriétés de débordement du div, mais d'après ce que j'ai lu dans le guide officiel de Mozilla webdev, l'utilisation de overflow-y: scroll (la valeur par défaut est de faire défiler dans ce cas) fait ce que je veux qu'il fasse. Si vous ajoutez plus de texte, augmenter la hauteur maximale entraînera le même problème. </p>
P粉321584263P粉321584263452 Il y a quelques jours536

répondre à tous(2)je répondrai

  • P粉347804896

    P粉3478048962023-08-16 23:21:43

    Supprimez la règle align-items:center;.

    répondre
    0
  • P粉226642568

    P粉2266425682023-08-16 09:18:28

    Pour vous assurer que la barre de défilement commence en haut et couvre tout le contenu du texte, apportez les modifications suivantes : De .general_container中删除justify-content: center;. De .general_container中删除height: fit-content;width: fit-content;. Pour limiter sa hauteur. .general_container设置一个特定的max-height

    Exemple

    .general_container {
        /* ...其他属性... */
    
        /* 删除 justify-content: center; */
        /* 删除 height 和 width fit-content */
        
        max-height: 600px; /* 根据需要进行调整 */
        
        /* ...其他属性... */
    
        overflow-x: hidden;
        overflow-y: auto;
    }

    répondre
    0
  • Annulerrépondre