CJK*_*CJK 15 html css material-design-lite
据我所知,这不是一个重复的问题,因为它与这个主题的其他问题有点不同.
我正在使用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;它时并不总是将页脚保持在页面底部,它有时会覆盖内容.当我尝试时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>`
有没有其他人有这个问题或对解决方案有任何想法？
编辑以添加更多信息:
问题不在于它的高度,body或者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>
K.A*_*.D. 33
我设法做到了:
.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>
测试:
我遇到了同样的问题，其中 amdl-mini-footer与我的mdl-layout__content.
我的解决方案是将标签分开，即
<main class="mdl-layout__content">
...
</main>
<footer class="mdl-mini-footer">
...
</footer>
并按如下方式修改类（从上面@KAD 的第一个解决方案中汲取灵感）
.mdl-layout__content {
flex: 1 0 auto;
}
.mdl-mini-footer {
flex: 0 0 auto;
}
页脚类的修改是必要停止页脚成长为空间我不希望它（第一0中0 0 auto）。
| 归档时间： |
|
| 查看次数： |
11462 次 |
| 最近记录： |