MaterialiseCSS边栏显示问题

Question

MaterialiseCSS边栏显示问题

我在Materialize CSS中遇到了这个奇怪的问题,其中侧栏与"主"面板和页脚中的内容重叠(参见图像:大多数内容在页面上被删除,标题中的"m"是标题的一部分)文本"问题提交"),即使我相信我已正确设置网格.它发生在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>

Run Code Online (Sandbox Code Playgroud)

有没有人有任何类似的问题或任何人都可以指出我的HTML布局有问题？

Answer 1

小智 5

如果您检查侧面导航文档并一直滚动到底部,它会显示在使用固定侧导航时如何抵消内容.

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，7 月前
查看次数：	7161 次
最近记录：	10 年，7 月前