MaterializeCSS 侧边栏显示问题

Question

我在使用 Materialize CSS 时遇到了这个奇怪的问题，其中边栏与 "main" 面板中的内容以及页脚 (see image here: most content is censored on the page, the "m" in the title is part of the title text "Problem Submission") 重叠，尽管我相信我有网格设置正确。 Chrome 和 Safari 都会发生这种情况（我打赌 IE 也不会有希望）。这是我的文档的基本结构，其中所有以下标记都在 <body> 标记内（这是一个 Jinja 模板，脚本包含并且所有内容都位于 "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>

有没有人有任何类似的问题，或者谁能指出我的 HTML 布局有什么问题？

Answer 1

如果您选中 side nav documentation 并一直滚动到底部，它会显示在使用固定侧边导航时如何偏移您的内容。

基本上，您只需在整个内容中添加一个填充。

 header, main, footer {
   padding-left: 240px;
 }

 @media only screen and (max-width : 992px) {
   header, main, footer {
     padding-left: 0;
   }
 }

媒体查询将确保当侧边导航在较小的屏幕上消失时内边距消失。您还可以根据侧边导航的大小调整左侧边距的大小。

MaterializeCSS 侧边栏显示问题

MaterializeCSS Sidebar Display Issue

html

css

jinja2

materialize