Question

I have created a fiddle来说明我的问题。基本上我想要一个具有可滚动内容的容器，其顶部和底部都有填充。 [编辑：]滚动时应该可以看到此填充，以便在任何给定时间从边缘到内容的距离相同。

<div class="container">
    <!-- pure content, no extra wrapper -->
    <h1>This is how I'd like it</h1>
    <p> ... </p>
</div>

我只能通过在容器内部添加额外的包装来实现效果。有没有人知道另一个没有引入另一个元素的解决方法？

<div class="container">
    <!-- extra wrapper, me unhappy -->
    <div class="inner">
        <h1>This is how I can do it</h1>
        <p> ... </p>
    </div>
</div>

Answer 1

我能想到的最简单的解决方案是在相同背景颜色的盒子周围添加一个厚边框，并相应地减小宽度/高度。 [边框的厚度=任何一侧所需的填充]＆amp; [边框颜色=方框的背景颜色]

Answer 2

尝试使用以下CSS。

.container {
    padding-top:10px;
    padding-bottom:10px;
    height: 80px; /* Set your desired value here */
    width: 200px; /* Set your desired value here */
    overflow-x: scroll; /* for horizontal scroll-bar */    
    overflow-y: scroll; /* for vertical scroll-bar */
    white-space: nowrap; /* needed only if you want to disable text-wrapping. */
}

如何创建一个可滚动的div，顶部和底部有填充，内部没有额外的标记？

2 个答案: