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; 
}

来源

2017-06-06 Asfalt

我知道它，但我想静态页脚，这是底部的页面，可见当我滚动到底部 – Asfalt

<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>

来源

2017-06-07 09:18:02

如果你试图让页脚出现在容器的底部，你需要使用的位置是：相对于上容器，这样页脚就会位于容器的底部。

来源

2017-06-06 22:24:56

使用的位置是：相对和底部：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 
}

这页脚将在页的末尾可见，同时滚动页面

来源

2017-06-07 06:17:12

css页脚总是页面底部

回答

相关问题