我一直试图让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>
答案 0 :(得分：0)
要实现这一点，你可以有一个容器div，其位置为relative，然后其中的“footer”位置为“absolute”。
对于滚动，请在容器中设置另一个具有设置高度的div，并将溢出设置为“auto”，并将“page”内容设置为。
请参阅下面的代码：
<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>