Html Question posted in
Some basic documentation can be found here.

Html – How to add padding on a container so that a scrollable content won't touch the top and bottom borders?

The issue is, I can’t figure out how to make the top and bottom padding work so that the scrollable content won’t touch the top and bottom borders when scrolling.

I’ve tried several methods I can think of, such as adding an outside container element, but didn’t work. Also tried the opposite of adding container inside.

Here’s the code in question:

<style>
  .container {
    height: 100px;
    width: 300px;
    overflow-y: scroll;
    padding: 10px;
    background-color: black;
    color: white;
  }
</style>

<div class="container">
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
</div>

enter image description here

I simply want to add a padding there that will prevent the content touching border.

Any ideas would be really appreciated! Thank you!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Okay I think I just figured out the answer. I'm just not sure if it's the right one. The trick is to add either an external or internal container, then adjust the CSS accordingly. What's important is setting a different height for the container that has the content.

    It's something like this:

    <style>
  .container {
    height: 100px;
    width: 300px;
    padding: 10px;
    background-color: black;
    color: white;

    .content {
      height: 100px;
      overflow-y: scroll;
    }
  }
</style>

<div class="container">
  <div class="content">
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
    <li>dogs</li>
  </div>
</div>

    enter image description here


  2. 0

    If I understand you correctly, you can try using pseudo-elements with display: sticky as indents.

    Example below:

    .container {
  height: 100px;
  width: 300px;
  padding: 0px 10px;
  overflow-y: scroll;
  background-color: black;
  color: white;
}

.container:before,
.container:after {
  content: '';
  display: block;
  position: sticky;
  width: 100%;
  height: 10px;
  background: inherit;
  left: 0px;
}

.container:before {
  top: 0px;
}

.container:after {
  bottom: 0px;
}
    <div class="container">
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
</div>
    Login or Signup to reply.
  3. 0

    A simple solution would be to use a matching border instead of padding (or in addition to it).

    .container {
  height: 100px;
  width: 300px;
  overflow-y: scroll;
  background-color: black;
  color: white;
  border: 10px solid black;
}
    <div class="container">
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search