html - 将“页脚”粘贴到 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>

标签： htmlcssstickysticky-footer

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>