即使页面内容非常小,如何添加始终位于屏幕底部的页脚
例如问题,假设我有一个页面没有显示那么多,因此页脚位于屏幕中间。我可以确保如果页面没有很多内容,那么页脚就在屏幕底部吗?
更新
当没有足够的内容来填满整个屏幕时,我只想要一个位于屏幕底部的页脚(即我不希望页脚出现在屏幕中间),然后如果有足够的内容它只是放在页面底部。
即使页面内容非常小,如何添加始终位于屏幕底部的页脚
例如问题,假设我有一个页面没有显示那么多,因此页脚位于屏幕中间。我可以确保如果页面没有很多内容,那么页脚就在屏幕底部吗?
更新
当没有足够的内容来填满整个屏幕时,我只想要一个位于屏幕底部的页脚(即我不希望页脚出现在屏幕中间),然后如果有足够的内容它只是放在页面底部。
使用以下 CSS 属性:
position: fixed;
bottom: 0px;
您正在寻找“粘性页脚”,本文展示了您可以使用的一些技术:
这是 flexbox 版本:http ://codepen.io/chriscoyier/pen/RRbKrL
HTML:
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
这是一个纯 CSS 的解决方案,不需要 jQuery。使包装器的最小高度为 100% 并相对定位,然后将页脚绝对定位到左下角:
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:80px;
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
您也可以对位置使用sticky,如下所示:
.footer {
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
您可以运行此代码以查看这是否是您要查找的类型固定页脚。
body {
display: grid;
min-height: 100vh;
min-width: 100%;
grid-template: "header main" "footer footer";
grid-template-columns: 100px 1fr;
grid-template-rows: 1fr 50px;
grid-gap: 10px;
}
body>div {
background-color: rgba(0, 51, 204, 0.5);
}
.header {
grid-area: header
}
.main-content {
grid-area: main;
text-align: center;
}
.footer {
grid-area: footer;
position: sticky;
position: -webkit-sticky;
bottom: 0;
z-index: 10;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Footer Stay!</title>
<link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>
<body>
<div class="header">
Header
</div>
<div class="main-content">main content</div>
<div class="footer">footer </div>
</body>
</html>
您需要使用绑定到页面底部的固定位置元素。
假设您使用 div 来包含页脚,您将需要一些像这样的 css:
div#footer{
position: fixed;
z-index: 1000000;
overflow: hidden;
bottom: 0px;
left: 0px;
height: 100px;
width: 600px;
}
当用户调整表单大小时,您可能希望更新高度和宽度。您可能还需要调整页面加载的宽度。
使用引导类
<footer class="container-fluid text-center">
<div class="footer navbar-inverse navbar-fixed-bottom">
<p>Footer is here</p>
</div>
</footer>