Html 使用GoogleMDL将页脚保持在页面底部_Html_Css_Material Design Lite

Html 使用GoogleMDL将页脚保持在页面底部

html css

Html 使用GoogleMDL将页脚保持在页面底部,html,css,material-design-lite,Html,Css,Material Design Lite,就我所知，这不是一个重复的问题，因为它与这个主题的其他问题有点不同我使用的是谷歌的Material Design Lite，页脚不会正确地停留在页面底部我已经看到了使用此技巧的不同修复 <div class="content"> <div class="header"></div> <div class="body"></div> <div class="footer"></div>

就我所知，这不是一个重复的问题，因为它与这个主题的其他问题有点不同

我使用的是谷歌的Material Design Lite，页脚不会正确地停留在页面底部

我已经看到了使用此技巧的不同修复

<div class="content">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

第一个选项不起作用，因为Material Design Lite实际上使用了页脚标记。老实说，我真的不想这么做，因为我觉得这有点马虎

页脚的CSS方法几乎可以工作，但是有一些问题。使用

位置时：绝对位置它并不总是将页脚放在页面底部，有时还会覆盖内容。当我尝试fixed
时，页脚总是保持在页面底部，但当页面有足够的内容滚动时，页脚会保持在屏幕底部并覆盖内容。fixed
和absolute
都会将页脚保持在屏幕底部，而不是页面，这意味着当有足够的内容滚动时，页脚会覆盖屏幕边缘的内容
fixed
的行为可以100%的复制，但是对于absolute
来说，我还没有弄清楚是什么原因导致它有时工作，而不是其他原因
这是我的页脚代码
<footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section">
        <button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
            <span class="visuallyhidden">Twitter</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
            <span class="visuallyhidden">Facebook</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
             <span class="visuallyhidden">Google Plus</span>
         </button>
     </div>
     <div class="mdl-mini-footer--right-section">
         <button class="mdl-mini-footer--social-btn social-btn__share">
             <i class="material-icons" role="presentation">share</i>
             <span class="visuallyhidden">share</span>
         </button>
     </div>
</footer>`

我设法做到了这一点：
1.无瀑布头
将页脚元素移到主元素之外
将.mdl-layout\u内容的样式设置为“flex:1 0 auto”

例如：
<body>
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
      ...
    </header>
    <main class="mdl-layout__content" style="flex: 1 0 auto;">
      ...
    </main>
    <footer class="mdl-mega-footer">
      ...
    </footer>
  </div>
</body>

  <body>
    <div class="site mdl-layout mdl-js-layout">           
      <header class="mdl-layout__header mdl-layout__header--waterfall">
          <div class="mdl-layout__header-row">
              <!-- Header Content Here -->
          </div>
      </header>
      <div class="mdl-layout__drawer">
          <!-- Drawer Content -->
      </div>
      <main class="mdl-layout__content">
          <!-- Main Content -->
      </main>
      <footer class="mdl-mini-footer">
          <!-- Footer Content -->
      </footer>
    </div>
  </body>


...
...
...


2.带瀑布头
只需将footer元素移到main元素之外
例如：
<body>
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
      ...
    </header>
    <main class="mdl-layout__content" style="flex: 1 0 auto;">
      ...
    </main>
    <footer class="mdl-mega-footer">
      ...
    </footer>
  </div>
</body>

  <body>
    <div class="site mdl-layout mdl-js-layout">           
      <header class="mdl-layout__header mdl-layout__header--waterfall">
          <div class="mdl-layout__header-row">
              <!-- Header Content Here -->
          </div>
      </header>
      <div class="mdl-layout__drawer">
          <!-- Drawer Content -->
      </div>
      <main class="mdl-layout__content">
          <!-- Main Content -->
      </main>
      <footer class="mdl-mini-footer">
          <!-- Footer Content -->
      </footer>
    </div>
  </body>



测试：

简短内容：
长内容：
试试这个
    <main class="mdl-layout__content">
        <div class="page-content">

        </div>
        <div class="mdl-layout-spacer"></div>
        <footer class="mdl-mini-footer">
            <div class="mdl-mini-footer__left-section">
                <div class="mdl-logo">Title</div>
                <ul class="mdl-mini-footer__link-list">
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Privacy & Terms</a></li>
                </ul>
            </div>
        </footer>
    </main>


标题





只需添加：
<div class="mdl-layout-spacer"></div>



之后：
<div class="page-content"></div>

我和你面临同样的问题。在浏览了许多教程和两个类似的问题之后，我浏览了一下MDL提供的一个模板，注意到页脚包含在主要部分中。我发现这与直觉有很大的出入，但是footer元素应该在结束标记之前指定，而不是在结束标记之后指定。
请参见标记的屏幕截图，该标记现在工作正常。我在TEDx GEC的网站上工作。以下是屏幕截图：
我遇到了同样的问题，一个mdl迷你页脚
与我的mdl-layout\u内容
重叠
我的解决方案是将标签分开，即
<main class="mdl-layout__content">
  ...
</main>
<footer class="mdl-mini-footer">
  ...
</footer>

修改footer类是必要的，以阻止页脚扩展到我不希望的空间（在0 auto
中的第一个0
）。您尝试过css表方法吗？与此类似，没有，但我在问题中解释了原因。我实际上需要使用页脚标记，所以这不是一个选项。以前从未使用过框架，但布局部分可能超出了我猜的范围。css表格解决方案适用于未知高度的页脚，绝对位置或固定位置也适用，但需要已知高度的页脚，您只需添加额外的填充或边距以避免重叠。您是否找到了一种解决方案，使页脚在窗口底部始终可见？现在我使用的是另一种布局：用相同颜色的页脚填充页脚下方的剩余空间。一个问题是，在将flex样式添加到mdl-layout_uu内容标记后，瀑布页眉不会粘贴到屏幕顶部，但这会将页脚保留在页面底部，因此这是一个好的开始我的页面样式相同，标题没有问题。您正在使用哪个MDL模板？已添加代码。如果你看到任何东西，请告诉我problems@CJK：无法直接将“位置固定”应用于页眉？此解决方案使页脚始终可见。如何仅当内容较短时才显示（在底部）？CSS表黑客是唯一的选择吗？
.mdl-layout__content {
  flex: 1 0 auto;
}

.mdl-mini-footer {
  flex: 0 0 auto;
}