Ich habe dieses seltsame Problem mit Materialise CSS, bei dem die Seitenleiste den Inhalt im Hauptfenster sowie die Fußzeile überlapptsiehe Bild hier: Die meisten Inhalte werden auf der Seite zensiert, das "m" im Titel ist Teil des Titeltextes "Problem Submission"), auch wenn ich glaube, ich habe das Gitter gesetztrichtig. Das passiert sowohl bei Chrome als auch bei Safari (ich wette auch keine Hoffnung für IE). Hier ist die grundlegende Struktur meines Dokuments, in der sich alle der folgenden Markups innerhalb des Dokuments befinden <body> Tag (es ist eine Jinja-Vorlage, Skript enthält und alles befindet sich in einer "Basis" -Vorlage):
<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>
Hat jemand ähnliche Probleme oder kann jemand mit meinem HTML-Layout etwas aufdecken?
Antworten:
4 für die Antwort № 1Wenn Sie das überprüfen Seitennavigation Dokumentation Wenn Sie ganz nach unten scrollen, wird gezeigt, wie Sie den Inhalt bei Verwendung einer festen Seitennavigation verschieben können.
Grundsätzlich fügen Sie Ihrem gesamten Inhalt nur eine Auffüllung hinzu.
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
Die Medienabfrage stellt sicher, dass die Auffüllung verschwindet, wenn Ihr seitliches Navi auf kleineren Bildschirmen angezeigt wird. Sie können auch die Größe der Polsterung anpassen, je nachdem wie groß Ihr Seiten-Navi ist.