0

I have this HTML

<div class="parent">
        <p>msg 1</p>
        <p>msg 2</p>
        <div class="proceed-msg">You want to proceed ? </div>
</div>

AND CSS

.parent {
    height: 300px;
    overflow-y: scroll;
    border: 2px solid black;
    width: 200px;
    position: relative;
}

.proceed-msg {
    position: absolute;
    bottom: 0px;
}

so everything is working as expected. My proceed message is at the bottom of the div. But if i have more messages, i need to have scrollbar at the div so that is the reason i putted scroll-bar:y in my parent div.

But when i have a lot of messages, my proceed-msg div is overlapping them.

<div class="parent">
        <p>msg 1</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        <p>msg 2</p>
        
        <div class="proceed-msg">You want to proceed ? </div>
    </div>

i need to put my proceed-msg always at the end - also when i have scrollbar in the div

How can i do that

pece
  • 87
  • 9
  • 2
    It should work if you remove the style of .proceed-msg. – TheKodeToad Nov 26 '21 at 11:56
  • @MrParrot If i remove the style, ten when i have two messages for example, i will not have my proceed msg at the end – pece Nov 26 '21 at 11:59
  • I need to have always my proceed -msg always at the end. – pece Nov 26 '21 at 11:59
  • _"But when i have a lot of messages, my proceed-msg div is overlapping them"_ - add an appropriate amount of `padding-bottom` to `.parent` then. – CBroe Nov 26 '21 at 12:00
  • _"i need to put my proceed-msg always at the end - also when i have scrollbar in the div"_ - so you _don't_ want it in a pseudo-"fixed" position then? If there are more messages than the parent element is high, then you want it to show only when the user has scrolled all the way to the bottom? Then you must not absolutely position it. Make your parent element a `flexbox` element, then you can align `.proceed-msg` always on the bottom of its content. – CBroe Nov 26 '21 at 12:04
  • When you say "at the end" do you mean "after all messages" or "always visible at the bottom of the parent"? – Vi100 Nov 26 '21 at 12:05
  • I should be visible only at the end of the parent div, but automatically not related to parent's heights – pece Nov 26 '21 at 12:07
  • @CBroe can you please provide an example wit h flexbox for my case ? – pece Nov 26 '21 at 12:09
  • https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox – CBroe Nov 26 '21 at 12:13

3 Answers3

1

MrParrot is correct: if you want the message to appear when you scroll to the bottom, then simply remove the styles from proceed-msg.

However, if you want the message to always be visible as you scroll through the list, then you can use sticky positioning:

.parent {
  height: 300px;
  overflow-y: scroll;
  border: 2px solid black;
  width: 200px;
}

.proceed-msg {
  position: sticky;
  bottom: 0;
  background: #eee;
  padding: 5px;
}
<div class="parent">
  <p>msg 1</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>Final message...</p>

  <div class="proceed-msg">You want to proceed ? </div>
</div>
Richard Deeming
  • 29,830
  • 10
  • 79
  • 151
  • you are hiding the overlapping with the background-color. I need that to be at the end not hided throught the scrolling – pece Nov 26 '21 at 12:09
  • No I'm not. The final message is not hidden. That's why I added a different message at the end, so that you could see it's not hidden. – Richard Deeming Nov 26 '21 at 12:10
  • Based on your new comment, you want the message to appear when you scroll to the bottom. As I said, in that case, follow MrParrot's advice: remove the style from `proceed-msg`, and it will appear when you scroll to the bottom. – Richard Deeming Nov 26 '21 at 12:11
0

I added margin-bottom and it worked fine

.parent {
  height: 300px;
  overflow-y: scroll;
  border: 2px solid black;
  width: 200px;
}

.proceed-msg {
  position: absolute;
  margin-bottom: 30px;
  background: #eee;
  padding: 5px;
}
<div class="parent">
  <p>msg 1</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>msg 2</p>
  <p>Final message...</p>

  <div class="proceed-msg">You want to proceed ? </div>
</div>
Praisegwn
  • 1
  • 1
0

Add these properties to .parent and .proceed-msg

.parent {
  position: relative;
  overflow-y: scroll;
}
.proceed-msg{
  position: fixed;
  bottom: 0rem;
}
Yash Sonalia
  • 378
  • 2
  • 8