Question

我在this containing element中有一些内容，正如您在JSFiddle中所看到的那样，该内容设置为具有固定的高度和overflow: auto;。滚动文本时，可以看到边框与上下两个文本都接触。

我想做的是即使在滚动时边框和文本之间也要有一个“填充”（不幸的是padding属性无法提供），我想知道是否可以使用单独的CSS。

如果可能的话，我希望避免修改DOM 。

Answer 1

尝试此变通方法，方法是在<main>的顶部和底部添加黑框，其边框颜色与<div>相同，如：

#content-bar > main {
    border-top: 16px solid black;
    border-bottom: 16px solid black;
}

body {
    color: rgb(240, 240, 240);
    font-family: sans-serif;

    background-color: rgb(150, 150, 150);
}

#content-bar {
    background-color: rgb(0, 0, 0);

    position: fixed;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    min-width: 100%;
    height: 60%;
    left: 0;
}

#content-bar > * {
    padding: 1em;
}

#content-bar > main {
    overflow: auto;
    border-top: 16px solid black;
    border-bottom: 16px solid black;
}

#content-bar > nav {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;

    min-width: 15%;
}

#content-bar > nav > a {
    text-align: center; /* <---- problem */
    display: flex;
    align-items: center;
    flex-grow: 1;
}

<body>
  <div id="content-bar">
    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate in arcu id ullamcorper. Pellentesque luctus ut felis vitae tempor. In dui neque, condimentum sit amet diam id, tristique interdum ipsum. In semper nisi leo, at consequat sem interdum feugiat. Proin vestibulum, turpis in tempus pellentesque, enim libero auctor libero, sit amet ultrices est felis sit amet nisl. Mauris vel mi mi. Suspendisse eleifend laoreet mi a congue. Fusce non libero in velit sodales pharetra nec in nisl. Phasellus elementum a odio eu sodales. Nunc luctus, est non pellentesque tristique, nibh mi pulvinar tellus, ut tincidunt dolor eros at leo. Donec varius dolor eget quam aliquet varius. In at iaculis est. Proin at purus sed ligula tincidunt ullamcorper sit amet a elit. Duis mollis lacinia mi, non aliquam arcu pulvinar ac. Aenean quis imperdiet lorem.</p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate in arcu id ullamcorper. Pellentesque luctus ut felis vitae tempor. In dui neque, condimentum sit amet diam id, tristique interdum ipsum. In semper nisi leo, at consequat sem interdum feugiat. Proin vestibulum, turpis in tempus pellentesque, enim libero auctor libero, sit amet ultrices est felis sit amet nisl. Mauris vel mi mi. Suspendisse eleifend laoreet mi a congue. Fusce non libero in velit sodales pharetra nec in nisl. Phasellus elementum a odio eu sodales. Nunc luctus, est non pellentesque tristique, nibh mi pulvinar tellus, ut tincidunt dolor eros at leo. Donec varius dolor eget quam aliquet varius. In at iaculis est. Proin at purus sed ligula tincidunt ullamcorper sit amet a elit. Duis mollis lacinia mi, non aliquam arcu pulvinar ac. Aenean quis imperdiet lorem.
        </p>
    </main>

    <nav>
      <a href="#">Element 1</a>
      <a href="#">Element 2</a>
      <a href="#">Element 3</a>
    </nav>
  </div>
</body>

带有滚动条的容器中与边框的距离内容

1 个答案: