时间戳

首页 > 解决方案 > 溢出时：auto，看不到 padding-bottom

css - 溢出时：auto，看不到 padding-bottom

问题描述

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur amet, vitae fuga provident et quae aut minus voluptate quidem maiores at recusandae sit deleniti quia dolore, illum reiciendis! Hic, optio Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, obcaecati dicta unde repellat illo maxime! Magni officiis, culpa nihil, sequi aliquid vel voluptas quidem laboriosam, omnis nam fuga veniam.</div>
</div>

.content {
  width: 200px;
  height: 150px;
  padding: 20px;
  background: yellow;
  overflow: scroll;
  box-sizing: border-box;
}

http://jsfiddle.net/v6yjLdnp/

为什么padding-bottom滚动时在这种情况下不起作用？我怎样才能做到这一点？

标签： cssoverflow

解决方案

问题可能是由滚动条引起的。

这是在 css 中使用伪元素的一种解决方法，但它可能会解决您的问题：

.content::after { content: ''; display: block; width: 100%; height: 20px; }

编辑：删除内容元素的填充底部，使其适用于所有浏览器：

.content { padding-bottom: 0px; }

推荐阅读