Keep the element positioned at the bottom of the scrollable area

Help! I can't seem to get the footer of my scrollable block element to stay at the bottom. It only sticks if the content (in this case, a table) is taller than the container itself. How can I ensure that the footer always stays at the bottom?

I attempted using position: absolute, but that causes the footer to remain fixed when the user scrolls.

.container {
  position: relative;
  overflow-y: scroll;
  height: 150px;
  display: block;
  border: solid 1px black;
}

.footer {
  position: sticky;
  right: 0;
  bottom: 0;
  float: right;
  background-color: lightblue;
}
<div class="container">
  <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    // Additional table rows...
  </table>
  <div class="footer">Footer</div>
</div>
htmlcss

Answer №1

To make the layout flexible, change the CSS display property of .container to flex

display: flex;
flex-direction: column;

Also, ensure that the .footer has a margin-top set to auto for proper alignment

Check out the code snippet below:

.container {
  position: relative;
  overflow-y: scroll;
  height: 150px;
  border: solid 1px black;
  display: flex;
  flex-direction: column;
}

.footer {
  position: sticky;
  right: 0;
  bottom: 0;
  float: right;
  background-color: lightblue;
  margin-top: auto;
}
<div class="container">
  <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
  </table>
  <div class="footer">Footer</div>
</div>
<br/>
<div class="container">
  <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
  </table>
  <div class="footer">Footer</div>
</div>

If needed, you can easily adjust the styling to ensure the footer does not occupy the entire width of the container.

Answer №2

One effective solution for your scenario is to incorporate a flex-box along with a scrollable content element. By setting the 

flex-direction: column; justify-content: space-between;
, you can ensure that the last child of the content will always be situated at the bottom.

Update: I assumed that you preferred a fixed height for the content. However, this approach also accommodates dynamic heights. To achieve this, simply replace the height: 150px; property with the max-height property.

.container {
  position: relative;
  overflow-y: scroll;
  border: solid 1px black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 16px;
}

.content{
  position: relative;
  width: 100%;
  height: 150px;
  background: red;
  overflow-y: auto;
}

.content__item{
  position: relative;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-size: 24px;
}

.footer {
  position: relative;
  width: 100%;
  background: green;
  color: #fff;
}
<div class="container">
   <div class="content>
   <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
        <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
   </table>
   </div>
   <div class="footer">Footer</div>
</div>

<div class="container">
   <div class="content>
   <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
   </table>
   </div>
   <div class="footer">Footer</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

enhancing the appearance of a controller/modal with personalized design influences

It has been a long time since I last worked with Angular, especially an older version like 1.2. However, I am confident that what I need can be achieved (hopefully I'm not mistaken). Below is the current code I have, and all I need to do is add a prop ...

cssangularjscontroller

Adjustable Bootstrap Progress Bar - Modify element width on the fly

I have encountered an issue with my progress bars on the webpage. The static HTML version works perfectly fine, but the dynamically created one using jQuery seems to be instantly at 100% without any delay in progression. To illustrate the problem better, ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with animated cursor function not activating when used with anchor links

I've spent hours searching for a solution but I can't seem to find one. I'm attempting to modify the codepen found at https://codepen.io/Nharox/pen/akgEQm to incorporate images and links, however, two issues are arising. The first issue is t ...

javascripthtmlcssanimationcursor

Incorporate dual repeated background images within one div element

I am struggling to apply two repeating background images in the X direction for my div. Is there a way to achieve this? I want to divide my single div into two equal parts, using the first image with background repeat-x for the first part and the second ...

htmlcss

Enhance the functionality of the Bootstrap navbar by enabling the slideUp and slideDown effects

I can't get jQuery's slideUp and slideDown methods to smoothly animate the Bootstrap navbar. When I tried using the slideUp method, the navbar only slid up a little before disappearing completely, and the same issue occurred with the slideDown me ...

javascriptjqueryhtmlcsstwitter-bootstrap

What causes offsetHeight to be less than clientHeight?

INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...

javascripthtmlcss

Issues accessing my Facebook account due to domain problems

I have developed an HTML5 game that I am currently running in my web browser. My objective is to integrate Facebook login functionality, so I followed a tutorial and replaced the necessary information with my App ID. However, upon running it, an error mes ...

javascripthtmlfacebook-javascript-sdk

The gap between list items(`<li>`s)

Feeling a bit perplexed here. I'm working on creating a page to showcase images. My goal is to have 5 images displayed per row, with maximum spacing when the window is at its widest (~950 px). However, as the window size decreases, I want the images t ...

htmlcss

Construct an HTML tag as a string using Jsoup

I'm faced with an element like this: <p> I am lost </p>` My task is to highlight "am" as follows; <p> I <mark style="background-color:#FFFF00;">am</mark> lost </p> This is my code: String newText = "I <mark ...

javahtmljsoup

Getting session data from a separate page tutorial in PHP

The current display only shows the user's email, while the phone number, city, and county are not being displayed. I would like to show all this information for a specific user. <?php session_start(); if(!($_SESSION['email'])){ hea ...

phphtmlmysql

Troubleshooting column alignment with Bootstrap4 and Angular: Resolving issues with text alignment on

Being relatively new to Bootstrap 4, as I have only used version 3.3 on my previous project which did not utilize the flexbox grid system. Now that I am embarking on a new project, I find myself facing a challenge: I am struggling to apply the "text-alig ...

htmlangularflexboxbootstrap-4

Transforming data from an HTML form into a PDF document - Tips for generating multiple outputs

As a newcomer to coding, I am facing a challenge in passing input data from a form to a PHP response page and then displaying it in the browser. I have created a functionality where the user can click on a button to save the HTML element to PDF. However, I ...

javascriptphphtmljquerypdf

Easiest Method for Expressing Mathematical Fractions

Math equations are an important aspect of my work, and I often use MathJax as a tool to create professional-looking formulas (check out more about it here). It basically functions like an html language. <script type="text/javascript" src="http://cdn.ma ...

htmlmathjax

Click the button to trigger the pop-up

After creating a photo gallery using a plugin, my goal is to display this gallery when the user clicks on my homepage button. I am unsure how to make this happen and would appreciate any assistance. Below is my button code: <div class="ow-button-base ...

javascriptjqueryhtmlcss

Attach a floating div to multiple elements throughout a webpage

Looking for the optimal method to place a div in various locations on a webpage while anchoring it from the bottom left. The div should be able to be attached to any element on the page for relative positioning, specifically intended for a tooltip. Each ...

css

Ensure that all panels are set to the same width as the widest panel

Is there a way to make all the panels in my jQuery tabs have the same width as the widest panel? I know that heightStyle:"auto" works for adjusting the height, but is there a similar option like widthStyle:"auto"? I want to show you the current look compa ...

htmlcssjquery-uijquery-ui-tabs

What is the best way to center text both vertically and horizontally within a container using Bootstrap 4?

To achieve a centered alignment for the h1 and p elements within the division, follow the code snippet below: <div id="outer" class="container"> <div id="inner"> <h1>Heading</h1> <p>Some content</p> </div> ...

htmlcssflexboxbootstrap-4

Why is the Material UI React select not selecting all children except for the last one?

I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...

cssreactjsmaterial-ui

What is the best way to turn my rectangular shape into a diamond in React Native using CSS?

https://i.sstatic.net/S4LPu.png Hi there, I'm facing a challenge with a project where my client wants to implement this orange border in react native. Unfortunately, CSS is not my strong suit. Can anyone please help me figure out how to achieve this ...

javascriptcssreactjsreact-native

Accessing the CSS directly for one of the Kentico sites necessitates logging in

After launching the 3rd site on my Kentico install with multiple sites, I am encountering a strange issue. Files such as images, scripts, or CSS files are not loading by their relative path on this particular site. Instead, when I try to access the URL dir ...

htmlcsskenticomembership