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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add these properties to .parent and .proceed-msg

.parent {
  position: relative;
  overflow-y: scroll;
}
.proceed-msg{
  position: fixed;
  bottom: 0rem;
}