css页脚总是页面底部
问题描述:
如何让页脚始终保持在页面底部(不粘)?我的页脚位于屏幕的底部,但不在页面上。css页脚总是页面底部
这是我的代码的一个例子。
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
CSS
.footer {
width:100%;
height:109px;
position:absolute;
bottom:0;
left:0;
background-color: purple;
}
答
<style>
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
</style>
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>
</div>
答
如果你试图让页脚出现在容器的底部,你需要使用的位置是:相对于上容器,这样页脚就会位于容器的底部。
答
使用的位置是:相对和底部:0,你可以在页面的结尾让您的页脚
修改您的样式表是这样,你可以清楚地了解效果
.footer {
width:100%;
height:109px;
position:relative;
bottom:0;
left:0;
background-color: purple;
}
.body { // I've added this
height: 1000px; // For better understaing
}
这页脚将在页的末尾可见,同时滚动页面
我知道它,但我想静态页脚,这是底部的页面,可见当我滚动到底部 – Asfalt