Dar*_*ryn 31 html css typo3 sticky-footer bootstrap-4
不确定为什么粘性页脚不能在Bootstrap 4中工作.我有一个TYPO3网站,我是初学者.
粘性页脚没有粘在页面底部.
这是已呈现的页面源的副本.
我基本上从bootstraps docs文件夹中复制了html文件,然后将其修改并复制到我的TYPO3模板中.
如果我在页面上填充内容,则页脚不会粘住 - 我必须向下滚动页面才能看到它.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky footer with a
fixed navbar</a> if need be, too.
</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>Dar*_*ryn 37
管理好解决它.也许我对"Sticky"或其他什么有误解,但解决方案是改变绝对 - >在css文件中修复.
例如来自:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
至:
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
Zim*_*Zim 31
更新2018 - Bootstrap 4.0.0
现在Bootstrap 4.0是flexbox,使用flexbox更容易粘性页脚.
<div class="d-flex flex-column sticky-footer-wrapper">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
body, .sticky-footer-wrapper {
min-height:100vh;
}
.flex-fill {
flex:1 1 auto;
}
演示:Bootstrap 4 Sticky Footer(4.0.0)
注:该flex-fill实用程序类将被列入下一个引导程序4.1版本.因此,在该版本之后,将不需要额外的用于flex-fill的CSS.
另见:Bootstrap 4 - 粘性页脚 - 动态页脚高度
Ben*_*eer 30
Bootstrap 4文档中的示例具有以下CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
你可能忘了设置html { position: relative; min-height: 100%; }- 我知道我通常会忘记那部分.
sha*_*ker 12
在Bootstrap 4中,使用固定底层类来粘贴页脚.无需自定义CSS:
<footer class="footer fixed-bottom">
...
</footer>
<html class="h-100">
.
.
</html>
这应该可以解决问题。它类似于Benjieer 的答案，但已准备好引导程序类。使用 Bootstrap 4.3.1 测试
| 归档时间： |
|
| 查看次数： |
39234 次 |
| 最近记录： |