物化页脚不会到页面底部
saa*_*adq 11 html css footer materialize
有没有办法将页脚保持在页面底部,即使没有很多内容？我跟着Materialise的页面上的说明和有我之间的所有HTML <header>,<main>和<footer>标签.我根本没有将任何自己的CSS应用到页脚.
任何帮助,将不胜感激.
这是我的HTML:
<body>
<header>
<nav role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">Some Title <i class="material-icons left hide-on-med-and-down">apps</i></a>
<ul id="dropdown" class="dropdown-content">
<li><a href="">Register</a></li>
<li class="divider"></li>
<li><a href="">Sign In</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li id="timer-tab"><a href="">Tab 1</a></li>
<li id="stats-tab"><a href="">Tab 2</a></li>
<li id="graphs-tab"><a href="">Tab 3</a></li>
<li><a href="" data-activates="dropdown" class="dropdown-button">Tab 4<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Some Title</h5>
<p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col l2 offset-l2 s6">
<h6>About</h6>
<ul>
<li><a href="" class="grey-text text-lighten-3">Help</a></li>
<li><a href="" class="grey-text text-lighten-3">Contact</a></li>
<li><a href="" class="grey-text text-lighten-3">Suggestions</a></li>
</ul>
</div>
<div class="col l2 s6">
<h6>Developer</h6>
<ul>
<li><a href="" class="grey-text text-lighten-3">Source</a></li>
<li><a href="" class="grey-text text-lighten-3">Contribute</a></li>
<li><a href="" class="grey-text text-lighten-3">API Docs</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">Made by <a href="">Me </a></div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/js/materialize.min.js"></script>
<script src="/js/bundle.js"></script>
</body>
Ale*_*lex 20
根据materializecss:必须将以下规则添加到您的CSS中以获取粘性页脚:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
tha*_*ima 13
只是补充一点,亚历克斯的答案很有效,因为你有这个结构:
<body>
<!-- Header content -->
<main>Page Content</main>
<!-- Footer content -->
</body>
只需添加此样式：position:fixed;bottom:0;left:0;width:100%; 在页脚元素。
例如：
<footer class="page-footer" style="position:fixed;bottom:0;left:0;width:100%;">
...
</footer>
| 归档时间： |
|
| 查看次数： |
17387 次 |
| 最近记录： |