фиксированный эффект нижнего колонтитула в CSS (например, фиксированное изображение)

Question

Я хотел бы создать эффект нижнего колонтитула, как на сайте this. Я думаю, мне нужен обертку для моего контента, а затем добавить нижний колонтитул.

Так структура будет, как:

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

Однако это не делает этого эффекта. Пожалуйста, помогите и извините за мой английский.

Answer 1

Для этого вам нужно будет зафиксировать нижний колонтитул и прокрутить содержимое над ним.

Грубый пример 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 */ 
} 

Answer 2

пожалуйста, проверьте этот код

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