CSS: Fixed item at the bottom of a container that scrolls horizontally

Question

CSS: Fixed item at the bottom of a container that scrolls horizontally

I am working on creating a sticky footer within a horizontally scrolling element. I want the sticky footer to be positioned at the bottom, adjust its height based on the content inside it, and match the width of the scrollable parent (in this case 200px). The goal is for the footer to stay in place when scrolling horizontally and have its content centered horizontally (the content being more than just plain text). Any help would be greatly appreciated.

Desired outcome: https://i.sstatic.net/zYyVx.png

This is my current code:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.example {
  width: 200px;
  overflow-x: auto;
}

.container {
  position: relative;
  display: flex;
  width: 400px;
  height: 100px;
  background-color: moccasin;
}

.footer {
  position: sticky;
  bottom: 0;
  background-color: palegreen;
  justify-self: center;
}

<div class="example">
  <div class="container">
    <div class="footer">
      Footer
    </div>
  </div>
</div>

Thank you so much.

html css sticky sticky-footer

Answer 1

Answer №1

Here is a solution for your problem: (Inserted Lorem Ipsum to demonstrate the scrolling effect and fixed footer)

* {
  box-sizing: border-box;
  outline: 1px solid red;
}

body {
  margin: 0;
  padding: 0;
}

.example {
  width: 200px;
  height: 300px;
  overflow-x: auto;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 100%;
  background-color: moccasin;
}

.footer {
  position: sticky;
  width: 200px;
  height: 20px;
  top: 100%;
  background-color: palegreen;
  text-align: center;
  left: 0;
}

<div class="example">
  <div class="container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum
    <div class="footer">
      Footer
    </div>
  </div>
</div>

Answer 2

Here is a solution for your problem: (Inserted Lorem Ipsum to demonstrate the scrolling effect and fixed footer)

* {
  box-sizing: border-box;
  outline: 1px solid red;
}

body {
  margin: 0;
  padding: 0;
}

.example {
  width: 200px;
  height: 300px;
  overflow-x: auto;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 100%;
  background-color: moccasin;
}

.footer {
  position: sticky;
  width: 200px;
  height: 20px;
  top: 100%;
  background-color: palegreen;
  text-align: center;
  left: 0;
}

<div class="example">
  <div class="container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum
    <div class="footer">
      Footer
    </div>
  </div>
</div>

Answer 3

Answer №2

Check out the modifications below. I revamped some of the CSS in your .footer class to make it 100% wide and added position: relative. Additionally, I included align-self: flex-end; and customized scrollbar styles using ::-webkit-scrollbar. Feel free to adjust as needed.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.example {
  width: 200px;
  overflow-x: auto;
}

.container {
  position: relative;
  display: flex;
  align-self: flex-end;
  width: 400px;
  height: 100px;
  background-color: moccasin;
}

.footer {
  position: relative;
  height: 20px;
  background-color: palegreen;
  align-self: flex-end;
  width: 100%;
  text-align: center;
}

::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

p {
  margin: 0;
  padding: 0;
  position: fixed;
  margin-left: 5rem;
}

<div class="example">
  <div class="container">
    <div class="footer"><p>Footer</p></div>
  </div>
</div>

EDIT: You had used justify-self: center;. By utilizing position: relative;, you can employ align-self: flex-end; to position the footer at the bottom. I also applied position: fixed; with a bit of margin to keep your text fixed while scrolling.

Answer 4

Check out the modifications below. I revamped some of the CSS in your .footer class to make it 100% wide and added position: relative. Additionally, I included align-self: flex-end; and customized scrollbar styles using ::-webkit-scrollbar. Feel free to adjust as needed.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.example {
  width: 200px;
  overflow-x: auto;
}

.container {
  position: relative;
  display: flex;
  align-self: flex-end;
  width: 400px;
  height: 100px;
  background-color: moccasin;
}

.footer {
  position: relative;
  height: 20px;
  background-color: palegreen;
  align-self: flex-end;
  width: 100%;
  text-align: center;
}

::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

p {
  margin: 0;
  padding: 0;
  position: fixed;
  margin-left: 5rem;
}

<div class="example">
  <div class="container">
    <div class="footer"><p>Footer</p></div>
  </div>
</div>

EDIT: You had used justify-self: center;. By utilizing position: relative;, you can employ align-self: flex-end; to position the footer at the bottom. I also applied position: fixed; with a bit of margin to keep your text fixed while scrolling.

CSS: Fixed item at the bottom of a container that scrolls horizontally

Answer №1

Answer №2

Similar questions

What is the method to make xsl:function return a string value containing HTML tags?

Tips for showcasing beautifully formatted XML content on a webpage

Deactivate additional fields when choosing an option from the drop-down selection menu

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

Is there a way to use CSS animation and transform to create a flip effect on two different divs, flipping them up and then back down with pauses and looping in between?

What is the best way to change a dynamically centered text alignment?

Turn off drag and drop functionality and activate selection in HTML

Google Gears moves website lower in Chrome's rankings

JQuery modal for creating vibrant and personalized color schemes

Bootstrap carousel powered by AngularJS

Creating an Image with a specified form action

Albania's Interactive Mapping Tool

Controlling the order of class specification prioritization

The divs contained are misaligned and not properly centered on the page

Prevent users from downloading images

Differentiating between the components and contents of a webpage during the process of web scraping

The chosen option does not equal the value retrieved by using jQuery's

Tips for modifying the value and refreshing the array

The issue of the selection option not being cleared after being set to 0 persists in JavaScript

Steps for adding a div after a specified number