J'essayais de faire un site Web de la galerie pour les affaires de mon père et je suis tombé sur un problème. Mes images étaient coupées par mon pied de page. Voici un exemple de mon code.
h1 {
font-family: "Balsamiq Sans";
font-weight: 100;
}
/*Start of IMG*/
img:hover {
opacity: 1.0;
}
img {
opacity: 0.17;
}
.row {
position: relative;
left: 3%;
}
/*End of IMG*/
/*Start of FOOTER CSS*/
#dev-note {
padding-bottom: 3em;
}
#foot-twitter {
position: relative;
right: 0.5%;
}
#foot-facebook {
position: relative;
left: 0.5%;
}
/*End of FOOTER CSS*/
/*Start of MAIN CSS*/
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 5rem; /* Footer height */
background-color: #00bfff;
margin: 0;
text-align: center;
padding-top: 2em;
padding-bottom: 2em;
font-size: 12px;
font-family: Mukta;
}
body {
background-color: white;
color: black;
font-family: ;
}
/*End of MAIN CSS*/
3 Réponses :
Suppression de De plus, p> Poste: absolu code> et bas: 0 code> du pied de page.
<div id="page-container">
<div id="content-wrap">
<!--Page Content-->
<center>
<h1>The Balloonatic's Balloons!</h1>
</center>
<!--Start of Gallery-->
<img src="https://static.wixstatic.com/media/92ee09_33917459124548d397fef56096891dbc.jpg/v1/fill/w_519,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_33917459124548d397fef56096891dbc.webp" alt="Joe's Son in an elephant mask made out of latex balloons." height="420"
width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_25e030786c9947e78d44a687bfc0b2e7.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_25e030786c9947e78d44a687bfc0b2e7.webp" alt="Photo of a balloon dress that is mostly green but has a black patter on it. This balloon dress also has a green lace that would go around the neck."
height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_5b51aaac5eb043659f8791e466823787.jpg/v1/fill/w_393,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_5b51aaac5eb043659f8791e466823787.webp" alt="Photo of a demonic mask made out of balloons.Yellow eyes and red face."
height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_b8ad33393aaf4191a1be710697e929bc.jpg/v1/fill/w_491,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_b8ad33393aaf4191a1be710697e929bc.webp" alt="3 Photos of Hayden Lansinger at age 6 or 7 holding a balloon crossbow."
height="420" width="420" class="row">
<img src="https://static.wixstatic.com/media/92ee09_79587a1f798a488dbbc6b23bde2ec615.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_79587a1f798a488dbbc6b23bde2ec615.webp" alt="A balloon dragon. Black with green eyes." height="420" width="420"
style="text-align: center">
<img src="https://static.wixstatic.com/media/92ee09_d71175118d024b78a531058ad0ecd60f.jpg/v1/fill/w_367,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_d71175118d024b78a531058ad0ecd60f.webp" alt="A balloon race car, green and black." height="420" width="420"
class="row">
<img src="https://static.wixstatic.com/media/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.jpg/v1/fill/w_657,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_38e56d6a8b4245e3a6def25ad3d0dfc8.webp" alt="An abominable snowman made out of balloons." height="420" width="420"
class="row">
<img src="https://static.wixstatic.com/media/92ee09_ea62749742d3443a8be115586e0d0c9e.jpg/v1/fill/w_368,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_ea62749742d3443a8be115586e0d0c9e.webp" alt="A photo of Chloe Lansinger in a balloon dress." height="420" width="420"
class="row">
<img src="https://static.wixstatic.com/media/92ee09_965444c3c8ab4b25a0743db871c867f0.jpg/v1/fill/w_489,h_491,al_c,q_90,usm_0.66_1.00_0.01/92ee09_965444c3c8ab4b25a0743db871c867f0.webp" alt="A picture of Balloosions Dressez." height="420" width="420" class="row">
<!--End of Gallery-->
</div>
<div id="footer">
<a href="https://twitter.com/balloosions" target="_blank">
<img src="https://static.wixstatic.com/media/01113281ebb7dfb57a8dc2a02eb1cb92.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/01113281ebb7dfb57a8dc2a02eb1cb92.webp" alt="Twitter Button" style="opacity: 1.0" id="foot-twitter">
</a>
<a href="https://facebook.com/balloosions" target="_blank">
<img src="https://static.wixstatic.com/media/b1cd13f9d4dfb1450bbb325285106177.png/v1/fill/w_30,h_30,al_c,q_85,usm_0.66_1.00_0.01/b1cd13f9d4dfb1450bbb325285106177.webp" alt="Facebook Button" style="opacity: 1.0" id="foot-facebook">
</a>
<footer id="copyright">© 2020 Balloosions</footer>
<footer id="dev-note">Developed and Designed by Hayden Lansinger</footer>
</div>
</div>
J'ai traversé votre code et j'ai pu ajouter un écart entre le pied de page et votre wrapper de contenu en augmentant simplement l'attribut inférieur du Content-wrap div Comme: