在CSS中固定页脚效果（如固定图像）

我想创建页脚效果，就像在this网站上一样。我想我需要一个包装我的内容，然后添加页脚。在CSS中固定页脚效果（如固定图像）

所以结构会是这样：

<div class="content"></div> 
<div class="footer"> 
    <div class="footer-content"> 
    </div> 
</div>

和CSS一样：

.footer{ 
width: 100%; 
} 

.footer-content{ 
position: fixed; 
bottom: 0; 
width: 100%; 
z-index: 0; 
} 
.content{ 
z-index: 9999 !important; 
background-color: #fff; 
position: relative; 
margin-bottom: 600px; //height of my full footer 
}

但是这并没有使这种效果。请帮助并为我的英语感到抱歉。

来源

2016-07-14 Roberto

埃米尔，是对的。另外，你的代码应该可以工作。 – Vcasso

阿米尔发短信关于固定背景图片 - 我想整个页脚固定效果（与内容）。 – Roberto

它非常接近，这里是一个小提琴：https://jsfiddle.net/jrgaoztp/ – deebs

为了达到这个目的，你需要修改页脚并将内容滚动到上面。

的CSS的一个粗略的例子是：

.content { 
    position: relative; /* required for z-index to work */ 
    z-index: 2;   /* bring above footer */ 
    margin-bottom: 100px; /* the height of the footer */ 
} 


.footer { 
    position: fixed; /* fix in position */ 
    z-index: 1;  /* bring below content */ 
    bottom: 0;  /* anchor to bottom of screen */ 
    left: 0;   /* go full width */ 
    width: 100%;  /* go full width */ 
}

来源

2016-07-14 19:25:46

请检查该代码

HTML

<div class="content"> 
    <h1>Content</h1> 
</div> 
<div class="footer"> 
    <div class="footer-content"> 
     <h1>Footer</h1> 
    </div> 
</div>

CSS

.footer{ 
    width: 100%; 
    height: 1px; 
    display: block; 
} 

.footer-content{ 
    bottom: 0; 
    display: block; 
    position: fixed; 
    width: 100%; 
    z-index: 0; 
    background: #f1f1f1; 
} 

.content{ 
    z-index: 9999 !important; 
    background-color: #fff; 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 1500px; 
    margin-bottom: 600px; 
    margin-top: -30px; 
}

样本 Fixed footer effect in CSS

来源

2016-07-14 20:07:57 anayarojo

在CSS中固定页脚效果（如固定图像）

回答

相关问题