0

I'm trying to make a popup-div which has very long information.

I wonder that at inner div, there is no end-point at bottom, because there are hidden informs, like:

┌────────────────────────┐
│                        │
│ ┌───────────────────┐  │
│ │                   │  │
│ │                   │  │
│ │                   │  │                  
│ │        ...      ↓ │  │        // ↓ means scroll down to see more.                          
└────────────────────────┘

And scrolling down to the end of the inner div:

┌────────────────────────┐
│                        │
│ ┌───────────────────┐  │
│ │       ...         │  │
│ │                   │  │
│ │                   │  │                  
│ └───────────────────┘  │                          //  │ └───────────────────┘  │   <- the endpoint showed up! 
└────────────────────────┘

│ └───────────────────┘ │ end-point has appeared.

Is it possible?

Prakhar Mittal
  • 6,315
  • 1
  • 14
  • 31
Eugene Fitzher
  • 163
  • 3
  • 17

1 Answers1

2

You can do it by setting the top spacing to the parent and the bottom spacing to the child.

  • Make the parent scrollable
  • Hide parent scrollbars (since visually the scrollbars touch the window bottom edge)
  • Adding a margin-bottom to the child element

* {margin: 0;box-sizing: border-box;}

body {
  background: #0fb;
}

.Popup {
  position: fixed;
  width: 70vw;
  top: 15vh;
  left: 15vw;
  bottom: 0vh; /* has to be at 0! */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* FF https://stackoverflow.com/a/49278385/383904 */
  -ms-overflow-style: none; /* IE 10+ */
}

.Popup::-webkit-scrollbar { /* WebKit */
  width: 0;
  height: 0;
}

.Popup-content {
  padding: 20px;
  height: 150vh;   /* Demo only... you place text inside */
  margin-bottom: 15vh; 
  border: 10px dashed #000;
  background: #0bf;
}
<h2>Lorem Ipsum</h2>
<div class="Popup">
  <div class="Popup-content">
    Scroll...
  </div>
</div>

Without hiding the scrollbars I don't think there's any sane solution to do it in pure CSS, not without the use of some JavaScript.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • Thank you so much <3. But I have a problem, parent bottom is not going up. Child's bottom line is going up, but still there is a parent's bottom. │ └───────────────────┘ │ └ │ │ ┘ – Eugene Fitzher Feb 22 '20 at 06:17