MaterializeCSS 侧边栏显示问题答案

【问题标题】：MaterializeCSS Sidebar Display IssueMaterializeCSS 侧边栏显示问题
【发布时间】：2015-10-17 02:22:33
【问题描述】：

我在 Materialise CSS 中遇到了一个奇怪的问题，即侧边栏与“主”面板中的内容以及页脚 (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 模板，包含脚本，所有内容都位于“基本”模板中）：

<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 布局有问题？

【问题讨论】：

标签： html css jinja2 materialize

【解决方案1】：

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

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

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

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

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

【讨论】：

感谢一百万！我想我已经搜索了一个月，从来没有完全到达 SideNav 的底部。