据我所知,这不是一个重复的问题,因为它与其他问题有所不同.
我正在使用Google的Material Design Lite,页脚不会停留在页面底部.
我看到使用这个技巧的不同修复
<div class="content">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
我试过使用这种方法
#footer {
bottom: 0;
width: 100%;
position: absolute; (or fixed)
}
第一个选项不起作用,因为Material Design Lite实际上使用了页脚标签.说实话,我真的不想这样做,因为对我来说似乎是一种马虎.
页脚的CSS方法几乎可以工作,但有一些问题.当使用position：absolute;它并不总是将页脚保持在页面底部,有时会覆盖内容.当我尝试固定页脚总是保持在页面的底部,但是当页面有足够的内容滚动它保持在屏幕的底部,并涵盖内容.固定和绝对都将页脚保持在屏幕的底部,而不是页面,这意味着当内容足够的内容可以滚动页脚覆盖屏幕边缘的内容.
固定的行为可以在100％的时间内复制,但绝对的,我还没有弄清楚什么原因是有时候而不是别的.
这是我对页脚的代码
<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>`
有没有人有这个问题或有任何想法解决方案？
编辑以添加更多信息：
问题不在于身体的高度或html,他们都在100％.
全布局代码
<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">
<!-- View Content Here -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
<div class="mdl-layout__obfuscator"></div>
</div>
</body>
解决方法
我设法做到：
没有瀑布头
>将页脚元素移到主要元素之外
>将.mdl-layout__content元素的样式设置为“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>
测试：
>短内容：http://codepen.io/kabudahab/pen/vGdVQM
>内容长：http://codepen.io/kabudahab/pen/JXpmpv
