What are the steps to position a group of elements at the bottom of the page?

I am trying to align a list of elements at the bottom of a container, but by default they are positioned at the top.

It's important that this list retains its scrolling functionality, so using flexbox is not an option. Flexbox causes elements to resize and eliminates scroll.

I'm struggling to find a straightforward solution for this issue.

JSFiddle Link

#list {
  height: 200px;
}

.item {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  margin: 3px 0;
}
<div id="list">
  <div class="item">Item0</div>
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
  <div class="item">Item7</div>
  <div class="item">Item8</div>
  <div class="item">Item9</div>
</div>

https://i.sstatic.net/TwRrd.png

htmlcssscrollalignment

Answer №1

Experience a clever trick with the use of transform scaling in the y-direction - check out the demo below:

#list {
  height: 200px;
  border:1px solid green;
  overflow-y: auto;
  transform: scaleY(-1);
}
.item {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  margin: 3px 0;
  transform: scaleY(-1);
}
<div id="list">
  <div class="item">Item0</div>
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
  <div class="item">Item7</div>
  <div class="item">Item8</div>
  <div class="item">Item9</div>
</div>

Answer №2

#list {
  position: absolute; bottom: 0;
}

be sure to include position: relative; on the element mentioned above

Link to example on JSFiddle

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

Upon submission, the select input in Vue.js and PHP fails to persist

My situation revolves around a lack of knowledge. I have an HTML form where I am using Vue.js to populate a v-select input with PHP data: <div id="app"> <form> <v-select name="user2_id" placeholder="Select User" :options="[{!! $ ...

javascriptphphtmllaravelvue.js

How to Change Text When Accordion is Expanded or Collapsed using Javascript

Help needed with JavaScript accordion menu for displaying indicators in front of section headers. The goal is to show a (+) when collapsed and (-) when expanded. The current code only changes on click, not based on the section's state. Looking for fre ...

javascriptcssaccordion

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...

javascripthtmlcss

Unable to apply Login Form Css to HTML

Creating a Login Form <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Login Form</title> <link rel = "stylesheet" type="text/css" href="{{ ...

htmlcssflask

Using Javascript and HTML5 Canvas to retrieve dimensions of selected objects

I have a canvas with an image containing colored squares. I want to be able to click on a square and retrieve its dimensions in pixels. For instance, clicking on a red square with a yellow border should return 24 X 100. I've come across some code that ...

javascripthtmlcanvas

Adjust image size dynamically while keeping the original aspect ratio

Is there a way to scale variable portrait and landscape images dynamically to fit proportionally within a browser window? You can find my current image resizing attempt here: http://jsfiddle.net/6pnCH/4/ I would like the image to be already scaled vertic ...

javascripthtmlcssimage

Issues with floating right alignment are being experienced

My website features a comments section on the right side of the screen, and I want the comment button to be perfectly aligned with the edge of this section. Despite using float:right in my CSS, there seems to be a few pixels off. Here is the relevant code ...

htmlcss

Having trouble getting a jQuery variable to work as an argument in an onclick function for an HTML

success: function(jsonresponse) { data = JSON.stringify(jsonresponse); $.each(JSON.parse(data), function (index, item) { var Id=item.id; var JobId=item.JobId; var eachrow = "<tr>" + "<td>" + item.id + "</td>" ...

javascriptjqueryajaxhtmljson.net

Leveraging knockout.js to define the width for kendo-ui input wrappers

In the durandal project I'm working on, where JavaScript and HTML are written on separate pages, I encountered an issue with a kendo-combo element. When I initially set the width using the wrapper-input width declaration, it worked perfectly fine. How ...

javascriptcssknockout.jskendo-uiwidth

Click on the shadowed div element to interact: inset

Is there a way to make elements clickable/focusable within a div that has an inset shadow, like the .calendar in this example? Check out this code snippet: https://jsfiddle.net/axel50397/846ostv5/9/ <div class="calendar"> <div class="card-dec ...

cssbootstrap-4

Challenging design with CSS shapes

Can this specific shape be created using just one HTML element? I am looking to use it for image cropping purposes, so having only one element would make the process easier ...

htmlcsstransformcss-shapes

Setting MenuItem to the correct width in asp.net simplified

I have a 1000px wide container, within it there is a menu control with 5 items (links). Each item has a width of 200px in the CSS file to make use of the entire length of the line. .level1 { border-width: 0px; margin: 0px; padding: 0px; background ...

c#asp.netcss

How can the input value be transmitted along with the formArray values?

I am currently working with a FormArray in my project where I can add new fields and submit the entire form data on button click. However, I am facing an issue trying to display and send an input field that is connected to the 'name' attribute wi ...

htmlangulartypescriptinput

Is there a way to ensure that an image stays pinned to the bottom of the screen, regardless of the device or screen

Looking for a solution to keep an image centered at the bottom of a website page regardless of screen size? I've tried different recommendations from Stack Overflow without success. position:fixed; bottom:0px; left:50%; Still struggling to make it wo ...

csscss-positionresponsiveresponsive-images

Animating the scale of an element while also adjusting its border-radius using CSS

I'm currently working on an animation that involves scaling a box with a rounded border of 8px. The issue I'm facing is that the rounded angle looks strange when the box is expanded, and I'm trying to avoid changing the width in the keyframe ...

cssanimationtransform

Issue with Bootstrap: Although there are 2 popovers included on the page, only one of them is functional

Pointing out the 2 on a page aspect is necessary to ensure that the JavaScript initialization is functioning properly. Just for reference, I attempted adding the initializer code right before the popover append in the JS, but it had no effect. Issue with ...

jqueryhtmltwitter-bootstraptooltippopover

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Whenever I resize my webpage browser, the 3 text input boxes move and overlap, causing the page layout to become messy. View of The Browser in full screen (normal) View of The Browser when it's smaller (not normal) As a beginner programmer, I have ...

htmlcssformatting

Checking the status of a checkbox after submitting using AngularJs

For my first application, I am utilizing AngularJs and JavaScript to display information from an API as checkboxes. Currently, the functionality is working well, but I am unsure how to validate if any checkbox options are checked with a submit button. Aft ...

javascripthtmlangularjs

How can I employ Single Sign-On (SSO) for my-website's account across various websites?

I'm looking to create a gaming platform similar to Epic Games, which we'll call "AB." I'd like game developers to be able to connect their games with my website and offer a "Login With AB" option on their login pages. Is this feasible? Thank ...

javascriptphphtmldjangosingle-sign-on

The Organization of Tabs in the AngularJS ui-select Component

As a newcomer to angularjs, I am currently working on a web application using the ui-select library for select2-style dropdowns. While developing my forms with appropriate tabindex values, I noticed a user experience issue with tab ordering. When tabbing ...

javascripthtmlangularjs