How to make a footer div push an affixed div up when you get to the bottom of the page

Question

I am trying to mimic the layout of this search results page. I have everything working using bootstrap affix, except for the footer. When you scroll to the bottom in the example that I have linked, the footer pushes up the map div. That is the part I am not able to figure out. When you scroll down on my example, it just goes behind the map div. How do I get the orange footer to push the map div (#mapcontainer) up?

CSS

    #topmenu.affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
  }
      
  #mapcontainer {
      background: lightgray;
      margin-top: -20px;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
      
  #mapcontainer.affix {
    top: 72px;
    z-index: 9999 !important;
    
  }   
  

  #topmenu.affix + .container-fluid {
    padding-top: 70px;
  }
/*    
  #mapcontainer.affix + .container-fluid {
    padding-top: 100px;
     background: lightgray;
  }
*/     

footer {
  height: 100px;
  background-color: orange;
}
      
.container-fluid{
    padding-right: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" id="topmenu" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
    <div class="col-sm-9" >
        <div id="mapcontainer" data-spy="affix" data-offset-top="200">
        <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
            <h1>map area</h1>
        </div>
    </div>
  </div>
</div>
<footer class="bg-light text-center text-lg-start" id="footer">

  <div class="text-center p-3">
    hello
  </div>

</footer>
    

</body>
</html>

iorgv · Accepted Answer · 2023-03-01T10:13:24.500

This is my solution, just needs to be made responsive, and tweak around with the affix's top and bottom.

#topmenu.affix {
  top: 0;
  width: 100%;
  z-index: 10000 !important;
}

#mapcontainer {
  background: lightgray;
  margin-top: -20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#topmenu.affix+.container-fluid {
  padding-top: 70px;
}

footer {
  height: 100px;
  background-color: orange;
}

.container-fluid {
  padding-right: 0px;
}


/*new code*/

.container-fluid .col-sm-9 {
  position: sticky;
  height: calc((100vh - 70px) - 0px);
  top: 70px;
}

#mapcontainer.affix {
  top: -20px;
  z-index: 9999 !important;
  position: relative;
  height: calc((100vh - 20px) - 10px);
}

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
  </div>

  <nav class="navbar navbar-inverse" id="topmenu" data-offset-top="197" data-spy="affix">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Basic Topnav</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3">
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
      </div>
      <div class="col-sm-9">
        <div id="mapcontainer" data-spy="affix" data-offset-top="200">
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
          <h1>map area</h1>
        </div>
      </div>
    </div>
  </div>
  <footer class="bg-light text-center text-lg-start" id="footer">

    <div class="text-center p-3">
      hello
    </div>

  </footer>


</body>

</html>

score 1 · Answer 2 · edited Mar 02 '23 at 09:43

it's just about position: sticky; on map area container, with that when you scrolling with two different content (map area on right and some text items on left) at the end you think footer pushes up the map area.

#topmenu.affix {
  top: 0;
  width: 100%;
  z-index: 9999 !important;
}

.d-flex {
  display: flex;
  /* flex-direction: row-reverse; */
  justify-content: space-between;
}

#mapcontainer {
  background: lightgray;
  height: 100vh;
  width: 50%;
  position: sticky;
  top: 85px;
}

#topmenu.affix+.container-fluid {
  padding-top: 70px;
}


/*    
  #mapcontainer.affix + .container-fluid {
    padding-top: 100px;
     background: lightgray;
  }
*/

footer {
  height: 400px;
  background-color: red;
}

.container-fluid {
  padding-right: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
  </div>

  <nav class="navbar navbar-inverse" id="topmenu" data-spy="affix" data-offset-top="197">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Basic Topnav</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </nav>

  <div class="container-fluid">
    <div class="row d-flex">
      <div class="col-sm-3">
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
      </div>
      <div id="mapcontainer" data-spy="affix" data-offset-top="200">
        text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1> text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>
        <h1>Some text to enable scrolling</h1>

      </div>
    </div>
  </div>
  <footer class="bg-light text-center text-lg-start" id="footer">

    <div class="text-center p-3">
      hello
    </div>

  </footer>



</body>

</html>

This did make the footer push up the map div, but it lost the sticky nav I had at the top of the page in the original code. — MrB, Feb 28 '23 at 14:40

How to make a footer div push an affixed div up when you get to the bottom of the page

2 Answers2