Question

我在Materialize 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布局有问题吗？

Answer 1

如果您检查side nav documentation并一直滚动到底部，则会显示在使用固定侧导航时如何抵消内容。

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

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

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

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

MaterialiseCSS边栏显示问题

1 个答案: