0

I have an interesting problem. I have a sidebar that can expand by means of a popover showing up when a user clicks on a link, and when it expands the footer needs to get bumped to stay at the bottom. Currently my sidebar expands beyond the footer, like in this fiddle.

I have tried setting my parent containers position: relative and the child to position: absolute with a bottom: 0 as answers like this answer, and this other answer have suggested to no avail. I've also tried the various solutions here without any luck.

Is there any pure CSS way to get my footer to stay below any text that may get appended to the sidebar like in this example (without getting hacky using margin-top like this).

Here is the code, please note that stackoverflows preview doesn't demonstrate the issue for some reason (see the fiddles above to see the actual issue):

.container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.sidebar {  
  overflow: visible;
  height: 175px;
  width: 200px;
}

.footer { 
  position: absolute;
  height: 200px;
  width: 100%;
  bottom: 0;
  
}

/* Not important to the problem statement styles */
.sidebar {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 0.5em;
  word-wrap: break-word;
}

.footer {
  background-color: cyan;
}

.footer div {
  width: 100%; 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
<div class="container">
  <div class="sidebar">
      This is some text that overflows outside of the container, but in a more complex world this is the desired behavior acceptable. However, the footer should bump down to be below this overflowing text - the footer should be at the very bottom... 
      
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sem ut urna suscipit dapibus ut et orci. Nunc laoreet ornare nunc vel imperdiet. Curabitur consectetur tempor magna, et convallis lacus rhoncus in. Etiam sagittis tempus lacus. Donec accumsan quam aliquam massa aliquet, a varius sapien luctus. Sed magna dui, sagittis ac consectetur et, pretium vel enim. Nullam in metus dignissim, bibendum urna in, sollicitudin dui. Donec vestibulum tellus sed diam lobortis posuere. Integer dictum est sed ante ultricies, nec tristique ante congue.
  </div>
  
  <div class="footer">
    <div>
        I'm a footer that should be at the bottom below this text, but I'm not
    </div>
  </div>
</div>
maxshuty
  • 9,708
  • 13
  • 64
  • 77

2 Answers2

1

You should change the position: absolute; of the footer to position: relative;. You should also remove the fixed height of the sidebar. If you don't do this the footer goes below this fixed height and not at the bottom of the page.

$(document).ready(function() {
  $('#popoverToggle').on('click', function() {
    $('#popover').removeClass('hidden');
  })
});
.container {
  position: absolute;
  height: 100%;
  width: 100%;
}

.sidebar {  
  overflow: visible;
  width: 200px;
}

.footer { 
  position: relative;
  height: 200px;
  width: 100%;
  bottom: 0;
}

.popover {
  height: 500px;
  position: relative;
  width: 400px;
  z-index: 10;
}

.hidden {
  display: none;
}

/* Not important to the problem statement styles */
.sidebar {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 0.5em;
  word-wrap: break-word;
}

.popover {
   color: white;
   background-color: blue;
   padding: 1em;
}

.footer {
  background-color: cyan;
}

.footer div {
  width: 100%; 
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="sidebar">
      This is some text that overflows outside of the container, but in a more complex world this is the desired behavior acceptable. However, the footer should bump down to be below this overflowing text - the footer should be at the very bottom... 
      
      <a href="#" id="popoverToggle">Show Popover</a>
      <div id="popover" class="popover hidden">
        I am a popover that is hidden on page load, but when a user hovers another element in the sidebar I appear.
        <br/>
        The footer should appear below me!
      </div>
  </div>
  
  <div class="footer">
    <div>
        I'm a footer that should be at the bottom below this text, but I'm not
    </div>
  </div>
</div>
  • Thanks for the answer, but I realized that my fiddle was a bit incomplete. I have updated the fiddle to include a popover that is shown when a user clicks on a link, there the problem still exists... https://jsfiddle.net/maxshuty/5es23fgq/ – maxshuty May 12 '20 at 19:11
  • 1
    @maxshuty I've changed up my answer! I hope it solved the problem for you! If not, contact me again and I will take a look! –  May 12 '20 at 19:55
0

this happens because overflow does not increase the size of the div, so the footer just sticks to the bottom the div above (.sidebar in this case). You can change the .sidebar div the have height: auto;.

Adarsh
  • 428
  • 5
  • 16