Question

我有一个div。我已将样式overflow: auto添加到div中 - 这使其看起来像this

我的问题是：如何在内容下添加空间 - 如this（正如您所看到的，文本下方有一个空格 - 我使用绘画制作了这个空间。

注意：当用户完全向下滚动时，底部的填充不是我要求的。

我的代码是：

<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>

Answer 1

骗子方法可能只是向border-bottom:10px solid white; div添加.background。但是，这会出现在滚动条之外，并且与您尝试实现的内容不匹配。

然而，如果有更多的代码，你就可以到达那里;你需要将position:relative;添加到.background div，将你的内容包装在另一个div中并添加以下伪元素：

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

此处的宽度是指全宽减去滚动条的设定像素数。您需要进行大量的跨浏览器测试才能确定在此使用的正确数字，我还建议在.content div中添加一些填充以阻止文本窥视。

显然，颜色和高度都可以根据您的布局和偏好进行调整。

/* 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>

Answer 2

请试试这个：

<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>

在Scrollbar下显示Padding-bottom

2 个答案: