CODEWITHSUNDEEP
htmlcss
apples23bob
apples23bob

Reputation: 3

Show Padding-bottom Under Scrollbar

I have a div. I have added the style overflow: auto to the div - this makes it look like this

My question is: how do I add space under the content - like this (as you can see, there's a space under the text - I made this using paint.

Note: A padding at the bottom when the user has scrolled all the way down is not what I'm asking for.

My code is:

<div class="background" style="overflow: auto;">
<h2>Example</h2>
<p>And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an exampleAnd welcome to my profile! This is an exampleAnd welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an exampleAnd welcome to my profile! This is an example</p>
</div>

Upvotes: 0

Views: 57

Answers (2)

Angelique
Angelique

Reputation: 936

A cheater method might be just to add a border-bottom:10px solid white; to your .background div. This would appear outside the scrollbar, however, and doesn't match the comp of what you're trying to achieve.

With substantially more code, however, you can get there; you'll need to add position:relative; to the .background div, wrap your content in another div and add the following pseudo-element:

.background:after {
    background:white; /* Or whatever matches your div */
    content:'';
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    height:20px;
    width:calc(100% - 20px);
}

The width here is meant to be full width minus a set number of pixels for the scrollbar. You'll need to do a lot of crossbrowser testing to figure out the right number to use here, and I also recommend adding some padding to the .content div to stop text from peeking through.

Obviously the colors and height can all be adjusted to your layout and preferences.

/* This is only to visually prove the effect and doesn't need to be copied */

body {
  background: violet;
}
.background {
  background: white;
  /* Or whatever matches your layout */
  position: relative;
}
.content {
  height: 120px;
  overflow: auto;
  padding:10px;
}
.content:after {
  background: white;
  /* Or whatever matches your layout */
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  width: calc(100% - 20px);
}
<div class="background">
  <div class="content">
    <h2>Example</h2>
    <p>And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an exampleAnd welcome to my profile! This is an exampleAnd welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an exampleAnd welcome to my profile! This is an example</p>
  </div>
</div>

Upvotes: 1

satya
satya

Reputation: 1185

Please try this:

<div class="background" style="overflow: auto; padding-bottom:20px">
<h2>Example</h2>
<p>And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an exampleAnd welcome to my profile! This is an exampleAnd welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an example And welcome to my profile! This is an exampleAnd welcome to my profile! This is an example</p>
</div>

Upvotes: 0

Related Questions