J'utilise du matériel angulaire pour mon application angulaire. Actuellement, j'ai une boîte de dialogue qui affiche des informations sur un post. Cependant, il y a beaucoup d'espaces gênants au bas du dialogue que je veux me débarrasser. Comment puis-je faire cela?
Html SCSS 
3 Réponses :
Vous devez supprimer la hauteur du puisque vous fournissez une hauteur fixe, il restera de l'espace vide si l'image ne prend pas tout l'espace.
Aussi votre #postform . A Hauteur: 80VH Le fait de prendre 80% de la hauteur de l'écran.
postimage a une hauteur de 80%, l'espace restant sera vide.
J'ai enlevé l'attribut de hauteur de la SCSS, mais il n'y a pas de différence. Que devrais-je faire?
Avez-vous montré le code complet de votre question? En outre, enregistrez également l'outil de développeur d'où l'espace blanc vient en inspectant l'élément.
body{
position: relative;
}
.postImage{
/* height: 80%; this is your bug */
width: 100%;
}
.bigImage{ /* you don't need this level and even if use <figure></figure> not <div></div> */
text-align: center; /* this means empty space on sides when text is to short to fill, this class hasn't setted width, so it should adjust to content witch is an img - block element without any wraps */
display: block;
}
#postForm{
height: 80vh; /* this one may caused problems too */
width: 100%;
display: box; /* incorrect value */
}
mat-dialog-container{
/* padding-right: 30px; */
/* padding-left: 30px; */
/* padding-top: 10px !important; don't use !important instead of debugging */
/* padding-bottom: 0px !important; */
padding: 10px 30px 0; /* nice and readable instead of 4 lines */
}
If you set strict height value don't be surprised if it keep it. Good prepared css is an investment - works properly and maintaining is plasure without headaches.
.postImage{
height: auto; or 100%
width: 100%;
}
or don't give the height at all