0

I've been trying to get a div to behave like a footer within it's bounding div and not the browser window. I've not had much luck. This code needs to be inserted into the bounding div on the main site and treat that div like the the browser window. If the page is too small the content is scrollable but the sticker "footer always remains visible and at the bottom of the bounding 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>

2
  • Use position: relative on your container div. And position: absolute to your sticky footer. Dont use position: fixed. Position fixed makes the div sticky on window. While Absolute will make it sticky relative to the parent div you want. Jun 13, 2018 at 19:43
  • Hi Rahul Thanks for the input when is echoed by the next answer, but doesn't really work as I explained in a comment to theirs below. Jun 14, 2018 at 0:48

1 Answer 1

0

To achieve this, you could have a container div that has position:relative, and then the "footer" within it has position "absolute".

For the scrolling, have another div within the container with a set height, and overflow set to "auto", and the "page" contents within.

See the snippet below:

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

3
  • Thanks, The issue is that the content div changes size depending on the screen. Your method places the footer at the bottom of a fixed height div. This isn't really a fluid footer behavior. I.e it doesn't stick to the bottom of a variable height div. Jun 14, 2018 at 0:47
  • Managed to get it working by having content set to 100% rather than a fixed size. Thanks to you both for the help. Jun 14, 2018 at 1:11
  • So this is the final result 90% there. Because I've got a variable size scrolling container I've set overflow:auto; and to Height:100% to cope. But because there is a header div above the scrolling container the page is now 100% plus header div. So my whole page scrolls and the sticky footer is partially visible at the bottom. Any suggestions how to counteract this? setting height to 100% - header div. I guess the easy option is to make the whole page scrollable but I'd rather not. Jun 14, 2018 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.