J'ai un espace vide qui ne cesse de croître et je ne sais pas pourquoi

Question

Image de la question : Photo de la question

Si vous regardez l'image précédente, vous verrez qu'il y a là un immense espace vide. Quand j'ai mon affichage normal (environ 1200 pixels) tout va bien. Cependant, lorsque la largeur diminue, cet espace vide augmente toujours et je ne sais pas pourquoi cela se produit.

Images affichées normalement à l’écran : Images normalement affichées

Je vais télécharger une partie du code HTML et CSS afin que le code puisse être écrit clairement.

.about-me{
marge supérieure : 10 px ;
largeur maximale : 100 % ;
hauteur maximale : 100 % ;
hauteur : 100vh ;
}

.à propos de moi h1{
couleur : verge d'or ;
alignement du texte : centre ;
taille de police : 52 px ;
}

.à propos de moi .à propos{
affichage : flexible ;
justifier-contenu : centre ;
aligner les éléments : centre ;
}

.à propos de moi .à propos de .text-container{
largeur maximale : 70 % ;
}

.à propos de moi .à propos de .text-container p{
taille de police : 24 px ;
alignement du texte : centre ;
marge : 50px ;
}

.à propos de moi .à propos de .text-container span{
couleur : verge d'or ;
poids de la police : 900 ;
}

.frontière{
affichage : flexible ;
justifier-contenu : centre ;
aligner les éléments : centre ;

bordure : 1px verge d'or solide ;
couleur de fond : verge d'or ;
rayon de bordure : 50 % ;

marge : 0 50px ;
largeur maximale : 100 % ;
}

.à propos de moi .border img{
largeur maximale : 100 % ;
hauteur maximale : 100 % ;
rayon de bordure : 50 % ;
échelle : 95 % ;
box-shadow : 0 0 10px rgba(0, 0, 0, 0.2);
}</pré>
<pre class="brush:html;toolbar:false;"><div class="à propos de moi" id="à propos de moi">
    <h1>Que sommes-nous ? </h1>
    <div class="à propos">
        <div class="text-container">
            <p>Texte</p>

            <p>Texte</p>

            <p>Texte</p>
        </div>

        <div class="frontière">
            <img src="img/arcos.jpg" alt="">
        </div>
    </div>
</div>

Answer 1

Je vois le problème. L'immense espace vide est dû à la largeur de max-width: 100%;属性在.about-me div上引起的。这个属性告诉浏览器将div的宽度设置为其容器的100%。然而，当容器的宽度减小时，div仍然会尝试保持100%, ce qui créera un espace vide.

Pour résoudre ce problème, vous pouvez réduire le .about-me div中删除max-width: 100%;属性。这将允许diven fonction de la largeur de son contenu, éliminant ainsi l'espace vide.