CODEWITHSUNDEEP
htmlcss
Leo
Leo

Reputation: 862

How to fix bottom to always show when scroll vertically

I have ul and some list inside.

at the bottom of ul, I have a div tag that always shows contents

I can't wrap ul tag with div or change structure of html.

is there any way to do it??

<ul>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
          .
          .
          .
   <div> Message always shown at the bottom </div>
</ul>

Upvotes: 1

Views: 73

Answers (3)

Clary
Clary

Reputation: 636

Pure CSS: One of the best solution is this, because those who perhaps want to make an element remain fixed while it is scrolling up and down!

body {
  margin: 10px;
}

ul {
  display: block;
  width: 210px;
  max-height: 120px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

li {
  padding: 8px 10px;
  display: block;
  font-size: 13px;
  cursor: pointer;
  background-color: #ddd;
}

li.fixed {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background-color: #111;
  color: #f2f2f2;
}
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
  <li>Item9</li>
  <li>Item10</li>
  <li>Item11</li>
  <li>Item12</li>
  <li>Item13</li>
  <li>Item14</li>
  <li>Item15</li>
  <li>Item16</li>
  <li>Item17</li>
  <li>Item18</li>
  <li>Item19</li>
  <li>Item20</li>
  <li>Item21</li>
  <li>Item22</li>
  <li>Item23</li>
  <li>Item24</li>
  <li>Item25</li>
  <li>Item26</li>
  <li>Item27</li>
  <li>Item28</li>
  <li>Item29</li>
  <li>Item30</li>
  <li>Item31</li>
  <li>Item32</li>
  <li>Item33</li>
  <li>Item34</li>
  <li>Item35</li>
  <li>Item36</li>
  <li>Item37</li>
  <li>Item38</li>
  <li>Item39</li>
  <li>Item40</li>
  <li>Item41</li>
  <li>Item42</li>
  <li>Item43</li>
  <li>Item44</li>
  <li>Item45</li>
  <li>Item46</li>
  <li>Item47</li>
  <li>Item48</li>
  <li>Item49</li>
  <li>Item50</li>
  <li class="fixed">HEADER</li>
</ul>

Upvotes: 0

joshmoto
joshmoto

Reputation: 5088

Interesting one this. I tried some tests below, but not using a <div> as it's not a semantic approaching putting a div inside a list.

The problem positioning something absolute inside a scrollable list, is that the positioning sticks to the loaded scroll position. Annoyingly.

I can't see a way round this unless you move your message outside the list. I may be wrong, someone else might find a solution for you.

I'm assuming you cant use position fixed as it will slam your message to the bottom of the window.

UL {
  position: relative;
  padding: 0 0 30px 0;
  background: gainsboro;
  list-style: none;
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}

LI {
  display: block;
  height: 30px;
  padding: 0 5px;
  line-height: 30px;
  border-bottom: 1px solid white;
}

.pseudo-option::after {
  content: 'Message always shown at the bottom';
  display: block;
  position: absolute;
  background: yellow;
  bottom: 0;
  height: 30px;
  padding: 0 5px;
  line-height: 30px;
  left: 0;
  right: 0;
  overflow: hidden;
}

.last-child-option LI:last-child {
  display: block;
  position: absolute;
  background: yellow;
  bottom: 0;
  height: 30px;
  padding: 0 5px;
  line-height: 30px;
  left: 0;
  right: 0;
  overflow: hidden;
}

DIV {
  padding: 5px;
  width: calc(50% - 10px);
  float: left;
}

H4 {
  margin-top: 0;
  margin-bottom: 5px;
}
<div>

  <h4>Pseudo Option</h4>

  <ul class="pseudo-option">
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
  </ul>
  
</div>
<div>  

  <h4>Last Child Option</h4>

  <ul class="last-child-option">
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>some contents</li>
     <li>Message always shown at the bottom</li>
  </ul>
  
</div>

If you using jQuery you could do something like this, is by having a custom message in a data attribute and adding it after the list and using css to target the message div. Just an idea as cant see away to do this with pure css.

$(document).ready(function() {
  
  // each desired list to add message
  $('UL').each(function(index) {
    
    // insert div imediately after with message from data attribute
    $('<div>' + $(this).data('message') + '</div>').insertAfter(this);
    
    // add show message class to list to update list bottom margin and style message
    $(this).addClass('show-message');

  });

});
UL {
  position: relative;
  padding: 0;
  background: gainsboro;
  list-style: none;
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
}

LI {
  display: block;
  height: 30px;
  padding: 0 5px;
  line-height: 30px;
  border-bottom: 1px solid white;
}

/* hide immediate div after list */
UL + DIV {
  display: none;
}

/* when show message class is added remove list bottom margin */
UL.show-message {
  margin-bottom: 0;
}

/* show message list class for immediate following div */
UL.show-message + DIV {
  position: relative;
  display: block;
  background: yellow;
  height: 30px;
  padding: 0 5px;
  line-height: 30px;
  overflow: hidden;
  margin-bottom: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

  <h4>jQuery Option</h4>

  <ul data-message="Message always shown at the bottom">
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
  </ul>
  
  <ul data-message="Another list Message always shown at the bottom">
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
    <li>some contents</li>
  </ul>

</div>

Upvotes: 1

Aib Syed
Aib Syed

Reputation: 3196

If you can use CSS just apply this to the div:

div {
    position: fixed;
    bottom: 0;
}

Run the snippet below:

div {
    position: fixed;
    bottom: 0;
}
<ul>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <div> Message always shown at the bottom </div>
</ul>

Additionally, if necessary, you can apply the style directly to the div like this:

<div style="position: fixed; bottom: 0;"> Message always shown at the bottom </div>

Live example below:

<ul>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <li> some contents</li>
   <div style="position: fixed; bottom: 0;"> Message always shown at the bottom </div>
</ul>

Upvotes: 1

Related Questions