Fixed footer at bottom of scrolling container according to content height

We are working on a container that has overflow-y:scroll and requires a sticky footer (bottom 0) unless the combined height of the content inside the scrolling container and the dynamic height of the footer exceed the container's height.

Here is the HTML structure:

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This footer should stick to the bottom until the .content overflows, then it should move below it.
    </div>
  </div>
</div>

The amount of content in both .content and .footer may vary.

We prefer not to use JavaScript for this solution if possible.

I have created a fiddle with different scenarios here: http://jsfiddle.net/bqvtf1zo/1/

Removing position: absolute from .footer fixes the issue with "little content" case (refer to the fiddle), but it breaks the other two cases.

htmlcssstickysticky-footer

Answer №1

To resolve this issue, it is recommended to create a flex container. (Alternatively, you can explore other solutions here: https://css-tricks.com/couple-takes-sticky-footer/)

In the container, ensure that the display property is set to flex, the flex-direction property is set to column, and assign a flex value of 1 to the scrollable content. Remove any positioning from the footer for optimal results.

This adjustment will cause the content to expand to fill the available height within the container and keep the footer anchored at the bottom of the content.

When implementing this solution, be sure to address any cross-browser compatibility issues related to flexbox by referencing resources like: https://github.com/philipwalton/flexbugs

.wrapper{
  position: relative;
  height: 205px;
  width: 200px;
}
.scroll{
  border: 1px solid red;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
   display:flex;
  flex-direction: column;
}
.content{
  background-color: #ccc;
  flex:1;

}
.footer{
  background-color: #efefef;

}
<h1>
 little content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>


<h1>
 large content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>

<h1>
 large content with large footer
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go further down<br>
    Some additional content
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring my website on Internet Explorer 8: What a disaster!

I am experiencing compatibility issues with my website on Internet Explorer while it looks great on other browsers like Chrome, Firefox, and Safari. Simply put, when I tested it using IETester, the layout was all over the place (you can compare by visiting ...

htmlcssinternet-explorer-8object-tagietester

The navigation dropdown menu in Bootstrap 4 spills over the edges of the window

In the code snippet provided above, an example of a navbar with a dropdown menu is given. One issue that arises is when the dropdown menu is clicked and it overflows to the right, causing a horizontal scroll bar to appear on the window. The question at ha ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing Flexbox for Arranging Content within a Container in HTML and CSS

I am currently working on getting the images to display within a pre-designed box that I set up. However, the images are appearing too wide and extending beyond the 50em width of the box. Additionally, they seem quite large in terms of height, and I'm ...

htmlcssflexbox

The tooltip is being truncated

https://i.sstatic.net/o41Qz.png Struggling with a tooltip that keeps getting cut off? I've tried everything and still can't get it right. <th class="fd-table--header-cell" scope="col"> <p class=&q ...

htmlcssangular

Tips for combining text and an unordered list on the same line:

I attempted to align them in a single line, but they are not cooperating. The text floating to the left looks fine, however, the list that floats to the right is causing issues. I tried various methods to make them display inline, but they still appear sli ...

htmlcss

Having trouble implementing uppercase text in Bootstrap editable modules

Recently, I implemented the bootstrap editable function in my application and it was functioning perfectly. However, I am now looking to have the editable text always display in uppercase format. Unfortunately, I am unsure of how to achieve this. Any sugge ...

javascriptjqueryhtmltwitter-bootstrap

Comparing Traditional Tables to Div Tables

Is this process: <table> <tr> <td>Hello</td> <td>World</td> </tr> </table> Achievable with the following code? <div> <div style="display: table-row;"> <di ...

cssperformancehtmlhtml-table

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

jquerycssajaxcallbackpositioning

the image isn't visible

I'm having trouble with a JavaScript function that is supposed to display an image on hover, but it's only showing the placeholder symbol for missing images. What could be causing this issue? Here is the code in question: function createimg() ...

javascripthtmlcssimage

What steps do I need to take to adjust my code so that the div function is hidden upon the second click

, I have provided my code as a beginner who is learning on the go. The code showcases a function that triggers on click and loads content accordingly. However, the desired functionality includes hiding the content on the second click and maintaining an "a ...

javascripthtmljquerycss

Could you explain the functions of :: and ~ in CSS?

After coming across a code snippet on Twitter, I saw the following: div::after { -webkit-transform: rotate(2deg); } div ~ div { -webkit-transform: rotate(0deg); } Can someone explain what this code does? ...

csspseudo-elementcss-selectors

How to conditionally prevent event propagation to children in VueJs

This Vue component is called ColorButtonGroup, and it serves as a group of checkbox/toggle buttons. It has a maximum limit of 4 colors that can be selected. The component utilizes another component called ToggleButton, which is a simple toggle selection w ...

javascripthtmlvue.jsvuejs2dom-events

Is there a way to arrange three of these cards side by side using CSS to alter their layout?

Hey everyone, I currently have a page that looks like this: Check out the current page I'm looking to change it so that instead of one image per row, there are three images per row (and reduce their size to fit three in a row). Here is my current c ...

htmlcssbootstrap-5

Is there a simpler way to retrieve data from PHP or to efficiently filter the data once it's been retrieved?

Creating a business directory website involves fetching data from a database. The issue arose when attempting to apply a function uniformly to all boxes, as only the first one with the specified id would function correctly. To address this problem, the fol ...

javascriptphphtml

Html5 - Placing the footer on top of the main content to create a unique design

Here is the HTML code snippet I am currently working on: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width = device-width"> <meta name="description" content="Some training on web design"> <me ...

csshtml

Firefox failing to display CSS files on web pages

My project is deployed on IIS 7.5 and when trying to access it from a different machine using Firefox, all files are rendered except for the CSS files (although they work fine in IE). I have checked that the MIME type for .css files is correctly set up in ...

cssfirefoxiis-7.5

PHP tutorial: How to retrieve and display all information from a database table within separate div elements

I have a large number of tables in my database, each with specific buttons associated with them. When I click on one of the buttons, it should display the table rows and columns in a div. However, the display is not working properly as expected. Please no ...

phphtmlmysqlsql

Customize Angular Material colors by defining the primary, accent, and warning colors

Recently delving into the world of angular material, I've found myself a bit perplexed regarding setting colors for specific elements. As a test, I'm importing the Angular theme called indigo-pink.css. For instance, when utilizing a mat button, ...

cssangularangular-materialangular-material2

Conceal the link until the div is hovered over

Is there a way to hide the [Add|Edit] link and only show it when hovering over the handle? The desired outcome is to display "001-001 Item 6" by default, as illustrated in the image. .dd-list { display: block; position: relative; margin: 0; paddin ...

htmlcssasp.net

Aligned to the left margin within a container located inside a 6-column Bootstrap division

I currently have two 6 column bootstrap divs positioned side by side within a row div. Both divs contain an image, with each image spanning half the width of the viewport. In the left column, above the image (set as a background via CSS), I want to place a ...

htmlcsstwitter-bootstrapbootstrap-4containers