J'essaie de créer un pied de page pour ma page Web simple et j'ai des problèmes avec un élément qui dépasse le bord du conteneur. Je suppose que c'est un problème avec la largeur.
J'essaye d'obtenir la balise
HTML:
.footer-message{
position:absolute;
width: 100%;
padding:5px;
bottom:0px;
}
CSS:
<div class="container">
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
J'utilise une position absolue pour permettre de l'aligner au bas de l'écran et je fixe la largeur à être 100% si je comprends bien qu'il hériterait de la largeur du parent qui dans ce cas, est un div avec une classe de container .
Qu'est-ce que je fais de mal? Merci d'avance!
Modifier: Ancienne capture d'écran
4 Réponses :
Ajoutez position: relative au conteneur, puis ajoutez left: 0; à droite: 0 à la classe footer-message .
J'espère que cela aidera
J'utiliserais CSS Grid pour cela, voir l'extrait suivant:
<article>
<header>
Page Header
</header>
<main>
Hi, there's not much content, yet. You can write in here to expand the container.
</main>
<footer>
All rights reversed.
<br>
I am always at the bottom of the page
</footer>
</article>
html,
body {
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
header {
background: #5170a9;
color: white;
padding: 1rem;
}
main {
color: #444;
padding: 1rem;
}
footer {
background: #182f58;
color: white;
padding: 1rem;
}
Créez votre pied de page comme dans l'exemple de documentation de materialize: https://materializecss.com/footer.html a> <footer class="page-footer">
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
</div>
</div>
</footer>
J'ai essayé de le reproduire, mais votre code sans CSS fonctionne très bien pour moi. Je ne sais pas si vous voulez que le
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<main>
<div class="container">
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
</main>
<footer>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Postez tout le code pertinent s'il vous plaît
De quelle pièce avez-vous spécifiquement besoin? Je n'ai pas inclus la plupart du contenu de la ligne car je ne pensais pas qu'ils seraient pertinents. La plupart des CSS sont des styles de boutons, d'en-têtes, etc.
La partie que vous avez fournie ne reproduit pas l'erreur.
Mon erreur! Mon navigateur a mis en cache l'ancien fichier CSS. Avec le code ci-dessus, l'erreur était en fait la balise
s'étendant au-dessus du bord de l'écran. J'ai mis à jour le message avec les informations correctes.