不确定为什么粘性页脚不能在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 …我正在尝试使用这个粘性页脚:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content{
flex: 1;
}
但它在<768px宽度处弄乱了渲染.
任何简单的CSS修复,以使其适用于所有分辨率？
我正在寻找一个粘性页脚的解决方案,其高度可能取决于浏览器的宽度.
流畅的设计中的粘性页脚并不是那么简单.我发现了实现粘性页脚的提示,讨论和解决方案.但是,所有这些都取决于页脚的固定和已知高度.在我的例子中,页脚的高度包含文本,行数取决于屏幕的宽度.
我不想进行各种媒体查询和构建一些工作,而是选择干净的CSS解决方案,当屏幕宽度变化时,粘性页脚会自动适应.
你们中的任何人都有最终答案吗？