How can you position two elements at the bottom of a ul element with a lengthy height?

Question

How can you position two elements at the bottom of a ul element with a lengthy height?

Looking for a way to position the last two li elements at the bottom of a large-height ul element while keeping the rest at the top.

The implementation can be viewed here.

Here is an example of the code:

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}

<div id="demo">
  <ul class="my-ul">
    <li>First Element</li>
    <li>Second Element</li>
    <li>Third Element</li>
    <li>Fourth Element</li>
    <li>Fifth Element</li>
  </ul>
</div>

Tried different solutions from here and here, but unfortunately, they are not working.

html css

Answer 1

Answer №1

The solution to this problem lies in utilizing flexbox

ul {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: flex-start;
}

ul li:nth-last-child(2) {
  margin-top: auto;
}

<ul>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
</ul>

Answer 2

The solution to this problem lies in utilizing flexbox

ul {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: flex-start;
}

ul li:nth-last-child(2) {
  margin-top: auto;
}

<ul>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
</ul>

Answer 3

Answer №2

Utilize css selector for the final two elements as illustrated in the code snippet below:

<div id="demo">
  <ul class="my-ul">
    <li>First Element</li>
    <li>Second Element</li>
    <li>Third Element</li>
    <li>Fourth Element</li>
    <li>Fifth Element</li>
  </ul>
</div>

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}
li:last-child {
  position: fixed;
  top: 370px;
}
li:nth-child(4) {
  position: fixed;
  top: 350px;
}

Answer 4

Utilize css selector for the final two elements as illustrated in the code snippet below:

<div id="demo">
  <ul class="my-ul">
    <li>First Element</li>
    <li>Second Element</li>
    <li>Third Element</li>
    <li>Fourth Element</li>
    <li>Fifth Element</li>
  </ul>
</div>

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}
li:last-child {
  position: fixed;
  top: 370px;
}
li:nth-child(4) {
  position: fixed;
  top: 350px;
}

How can you position two elements at the bottom of a ul element with a lengthy height?

Answer №1

Answer №2

Similar questions

Checking the validity of data before submission can help ensure the accuracy and security of your application

Convince me otherwise: Utilizing a Sinatra API paired with a comprehensive JS/HTML frontend

The hover functionality fails to activate when a z-index is applied

Encountering an issue... invariant.js:42 Error: A `string` value was received instead of a function for the `onClick` listener

Autocomplete feature enhanced with the ability to validate and clear out

Creating various iterations of a single CSS animation

The dialog box in CSS is extending too far down past the bottom of the screen, making it impossible to scroll and click on the buttons located

Complete alignment of several elements in a horizontal scrolling container

Searching for non-existent PHP index with $_POST superglobal

Loading AJAX content within the existing page instead of a pop-up window

Issues arising from the visibility and concealment of elements using bootstrap

Flexbox ancestor causing Bootstrap 5 Carousel width to double

Creating a stylish CSS button with split colors that run horizontally

Tips on showcasing lengthy string content from JSON in a structured list format using react with typescript

Adding a button input and deleting non-functional parent elements

Limit the rotation of jQuery and CSS3 elements to always turn in a clockwise direction

replace the standard arrow key scrolling with a new custom event

jQuery: Automatically scroll to the end of the div based on the height of the content within

Modify the width of the <nz-date-picker> component from Ng-Zorro

Utilizing Javascript to Connect with Java Web API