Having difficulty attaching elements to the bottom of a page

Kindly review the demo code provided. The issue is that when you scroll to the bottom, the stick to top element remains at the top as expected, but the stick to bottom element does not stick to the bottom as intended. Is there an error in the code?

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb9b4b4afa8afa9baab9beff5edf5e9">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row" style="height: 2000px;">
        <div class="col bg-success">
          <div class="col bg-info" style="position: sticky; top: 0">
            Stick to top
          </div>
        </div>
        <div class="col bg-danger">
          <div class="col bg-warning" style="position: sticky; bottom: 0">
            Stick to bottom
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0369727666717a43302d362d32">[email protected]</a>/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe3fbe7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Thank you.

htmlcssbootstrap-4

Answer №1

I suggest focusing on this particular answer for a similar issue. To address your specific situation, consider making the parent element a flex container (.d-flex in Bootstrap) and applying margin-top: auto to the sticky element (.mt-auto in Bootstrap).

Here is a modified example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d1cbd3cbd7">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row" style="height: 2000px;">
        <div class="col bg-success">
          <div class="col bg-info" style="position: sticky; top: 0">
            Stick to top
          </div>
        </div>
        <div class="col bg-danger d-flex">
          <div class="col bg-warning mt-auto" style="position: sticky; bottom: 0">
            Stick to bottom
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb1aaaebea9a29be8f5eef5ea">[email protected]</a>/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c08120a120e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

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

"Resizing a Javascript file resulting in the creation of a faulty base64

I have been attempting to resize images on the client side using HTML5 before uploading. However, it seems that the base64 string is broken as it contains spaces, line breaks, and other unexpected characters. Even after removing them, the string remains br ...

javascripthtmlbase64filereader

What is the best way to define ngOptionValue for my ng-option selection?

After updating my select/option code to include a search feature, it caused an issue with my function create. Here is the HTML code: <div class="input-group"> <label htmlFor="categoria" class="sr-only"> ...

htmlangulartypescript

What is the best way to restrict the border to just one element?

I've configured my navigation bar using a list with li elements. To give it a rounded appearance, I applied a border-radius to the background. Now, I'm looking to remove the border-left specifically from the home element. Below are the code snipp ...

htmlcss

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

Can this carousel be configured to show just 2 pictures at a time instead of 3? Check out the live demo here. I've attempted adjusting the columns to col-md-6 and the CSS to 50%, but haven't had any success... ...

jquerycsstwitter-bootstrap-3carousel

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

javascripthtmlcssvue.jscalculator

Tips on incorporating background color into HTML emails dispatched via PHP mail()

Struggling to add a background color to my HTML email. I've attempted various methods: Inserting <script> tags with CSS code inside Adding bgcolor in body tags Using a CSS style sheet All to no avail. I suspect it could be the email provi ...

phphtmlcsshtml-emailemail

Refreshing backdrop for navigating through lists - Sprite edition

I am facing some issues while trying to use a sprite image for my navigation icons. The background position offset is not working as expected, and the background image is stretching across the whole length of the navigation. It seems like I may need to spe ...

htmlcss

Adjust the color of the background when hovering with the cursor

I am currently working on a project with a menu of buttons that dynamically changes based on the elements in a list. For instance, if my list contains ["A", "B", "C"], then I would have a menu with 3 buttons. Here is how I display the buttons using a java ...

javascripthtmljquerycss

Unable to implement active class on parent li tab when child li is clicked

<div class="header_nav"> <ul id="navigation"> <li class="dropdown"><a href="#" rel="external">mainTab1</a> <ul class="sub_navigation"> ...

jqueryhtmlcss

Limiting the draggable element within a compact container using jquery UI

I've been attempting to drag an <img> within a fixed-width and fixed-height container. Despite researching on Stack Overflow and finding this solution, it doesn't seem to work for my specific case. If you check out this fiddle I created, y ...

javascriptjqueryhtmlcssjquery-ui

Is it possible to reach this result without relying on Modernizr?

Due to personal reasons that I won't delve into, my goal is to replicate the functionality of this menu : demo : http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ However, I want to achieve this without using Modernizr and poss ...

javascriptjqueryhtmlcssmodernizr

Using media queries in CSS to create responsive designs

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" /&g ...

htmlcssmedia-queries

Unable to assign the second value of the <input type="datetime-local" /> element to zero

I am currently working on a class called ClosedPlatform that has an attribute called Start, which is of type DateTime. public class ClosedPlatform { public DateTime Start; } My goal is to bind the Start attribute of a ClosedPlatform instance to a d ...

htmldatetimedata-bindingblazor

What is preventing this DIV from stretching to the full width of its children?

Why isn't my container DIV expanding to the width of the large table? <html> <head> <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" /> <link ...

htmlcss

Generate fresh input fields with distinct identifiers using JavaScript

My challenge is to dynamically create new empty text boxes in JavaScript, each with a unique name, while retaining the text entered in the previous box. I struggled with this for a while and eventually resorted to using PHP, but this resulted in unnecessar ...

javascriptphpjqueryhtml

Prevent incomplete date input in Html5 date input field

Is it possible to make an input type="date" field, which is not required, treat partially completed dates entered by the user (e.g. month and day without year) as invalid rather than silently accepting them? I would like to alert the user in this scenari ...

angularjshtmltwitter-bootstrap-3

JavaScript code encounters difficulties parsing HTML source

I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...

javascriptjqueryhtmlajaxjson

Is the second parameter of the function being used as a condition?

Why is it necessary to validate the helpText argument within the function to be non-equative to null when its ID is linked with the span tag? The functions task is to set and clear help messages in the form field using built-in CSS classes. <input id ...

javascripthtmlcssformsif-statement

Customize dropdown item colors in React using a color picker

I am currently utilizing a react color picker to create a personalized 16 color gradient. The process involves selecting a color from a dropdown menu and then using the color picker to make adjustments. This action updates an array that dictates the stylin ...

javascripthtmlcssreactjsreact-native

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

htmlcss