J'ai ce problème étrange avec Materialize CSS où la barre latérale chevauche le contenu du panneau "principal" ainsi que le pied de page (voir l'image ici: la plupart du contenu est censuré sur la page, le "m" dans le titre fait partie du texte du titre "Problème de soumission"), même si je crois avoir le jeu de grillecorrectement. Il arrive à la fois avec Chrome et Safari (je parie qu'aucun espoir pour IE non plus). Voici la structure de base de mon document, où tout le balisage ci-dessous est dans la <body> tag (c’est un template Jinja, le script inclut et tout se trouve dans un template "base"):
<header>
<nav class="top-nav green">
<div class="container">
<a href = "#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a>
</div>
<div class="container">
<div class="nav-wrapper"><span id="logo-container" class="brand-logo">{{ self.title() }}</span></div>
</div>
</nav>
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo"><a id="logo-container" href="/" class="brand-logo">Brand Name</a></li>
<li></li>
<li></li>
<li></li>
{% block navlinks %}
<li class="bold"><a href="/" class="waves-effect waves-teal">Back to Home</a></li>
{% endblock %}
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
{% block jumbo_content %}{% endblock %}
</div>
</div>
<div class="row">
<div class="col s12 m9 l10"><!-- Main content goes here -->
{% block main_content %}
{% endblock %}
</div>
<div class="col hide-on-small-only m3 l2"><!-- Nothing goes here (usually TOC -->
{% block toc_content %}
{% endblock %}
</div>
</div>
</div>
</main>
<footer class="page-footer green" style = "position: -webkit-sticky;">
<div class="container">
<div class="row">
<div class="col l9 m9 s12">
<h5 class="white-text">Brand Name</h5>
<p class="grey-text text-lighten-4">Description</p>
</div>
<div class="col l3 m3 offset-m3">
<h5 class="white-text">Important Links</h5>
<ul>
<li><a class="white-text" href="/login">Login</a></li>
<li><a class="white-text" href="/contact_us">Contact Us</a></li>
<li><a class="white-text" href="/about">About</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright notice
</div>
</div>
</footer>
Quelqu'un at-il eu des problèmes similaires ou quelqu'un peut-il signaler un problème avec ma mise en page HTML?
Réponses:
4 pour la réponse № 1Si vous vérifiez le documentation de navigation latérale et faites défiler l'écran jusqu'en bas, il montre comment vous pouvez décaler votre contenu lorsque vous utilisez une navigation latérale fixe.
Fondamentalement, vous ajoutez simplement un remplissage à votre contenu.
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
La requête du média s'assurera que le remplissage disparaît lorsque votre navigation latérale disparaît sur des écrans plus petits. Vous pouvez également modifier la taille du rembourrage à gauche en fonction de la taille de votre navigation latérale.