粘性"footer"到 div 不是页面底部

Question

我一直试图让div 在其边界div 而不是浏览器窗口中表现得像页脚。我运气不好。 此代码需要插入到主站点上的边界div 中，并将该div 视为浏览器窗口。 如果页面太小，内容是可滚动的，但贴纸"页脚"始终保持可见，并在边界div的底部。

<style type="text/css" scoped>
.header {
width: auto;
}

/*bottom sticky div */

.sticky {
width: auto;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
background: red;
}


/* Rest is just the fluid columns .css */

/*  SECTIONS  */

.section {
clear: both;
padding: 0px;
margin: 0px;
}
/*  COLUMN SETUP  */

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}

.col:first-child {
margin-left: 0;
}
/*  GROUPING  */

.group:before,
.group:after {
content: "";
display: table;
}

.group:after {
clear: both;
}

.group {
zoom: 1;
/* For IE 6/7 */
}
/*  GRID OF FOUR  */

.span_4_of_4 {
width: 100%;
}

.span_3_of_4 {
width: 74.6%;
}

.span_2_of_4 {
width: 49.2%;
}

.span_1_of_4 {
width: 23.8%;
}
/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_1_of_4,
.span_2_of_4,
.span_3_of_4,
.span_4_of_4 {
width: 100%;
}
}

</style>

<div header>Hello world
</div>
<div class="section group">
<div class="col span_1_of_4">
<p>1 of 4 </p>
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;width:100%;" /> Since 2011 Nathaniel
has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate sites with little
more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and the name of a contractor
called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</div>
<div class="col span_1_of_4">
2 of 4
</div>
<div class="col span_1_of_4">
3 of 4
</div>
<div class="col span_1_of_4">
4 of 4
</div>
</div>
<div class="sticky group">
<div class="col span_1_of_4">
a of 4
</div>
<div class="col span_1_of_4">
b of 4
</div>
<div class="col span_1_of_4">
c of 4
</div>
<div class="col span_1_of_4">
d of 4
</div>
</div>
</div>

Answer 1

为了实现这一点，你可以有一个具有 position：relative 的容器div，然后其中的"页脚"具有位置"绝对"。

对于滚动，在容器中设置另一个div，并将溢出设置为"auto"，并在其中设置"页面"内容。

请参阅下面的代码片段：

<style type="text/css" scoped>
.header {
width: auto;
}

/*bottom sticky div */

.sticky {
width: auto;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: red;
}


/* Rest is just the fluid columns .css */

/*  SECTIONS  */

.section {
clear: both;
padding: 0px;
margin: 0px;
}
/*  COLUMN SETUP  */

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}

.col:first-child {
margin-left: 0;
}
/*  GROUPING  */

.group:before,
.group:after {
content: "";
display: table;
}

.group:after {
clear: both;
}

.group {
zoom: 1;
/* For IE 6/7 */
}
/*  GRID OF FOUR  */

.span_4_of_4 {
width: 100%;
}

.span_3_of_4 {
width: 74.6%;
}

.span_2_of_4 {
width: 49.2%;
}

.span_1_of_4 {
width: 23.8%;
}
/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_1_of_4,
.span_2_of_4,
.span_3_of_4,
.span_4_of_4 {
width: 100%;
}
}

</style>

<div header>Hello world
</div>
<div style="position:relative"> <!-- THE CONTAINER DIV -->
<div style="height:150px; overflow:auto"> <!-- CONTENT DIV THAT SCROLLS -->
<div class="section group">
<div class="col span_1_of_4">
<p>1 of 4 </p>
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;width:100%;" /> Since 2011 Nathaniel
has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate sites with little
more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and the name of a contractor
called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</div>
<div class="col span_1_of_4">
2 of 4
</div>
<div class="col span_1_of_4">
3 of 4
</div>
<div class="col span_1_of_4">
4 of 4
</div>
</div>
<div class="sticky group">
<div class="col span_1_of_4">
a of 4
</div>
<div class="col span_1_of_4">
b of 4
</div>
<div class="col span_1_of_4">
c of 4
</div>
<div class="col span_1_of_4">
d of 4
</div>
</div>
</div>
</div>