粘貼到“ div”底部而不是頁面的“頁腳”

Question

我一直在嘗試使div在其邊界div（而非瀏覽器窗口）中的行為類似於頁腳。 我運氣不好。 需要將此代碼插入主站點的bound 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

為此，您可以使容器div的位置為：relative，然后其中的“頁腳”的位置為“絕對”。

為了進行滾動，將容器內的另一個div設置為高度，並將溢出設置為“自動”，並在其中設置“頁面”內容。

請參見下面的代碼段：

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