如何使单个div向下滚动？

Question

我一直在尝试使div块具有自己的滚动，因此从根本上来说div可以向下滚动而其他滚动条不移动。错误是，当我向下滚动时，div向上移动，但其他div是静态的，这使它看起来很丑，因为所有div之间都有一个空格，请告知是否需要更多说明！

html

<div class="wrapper">
    <div class="side-navbar">
        <h1>horse</h1>
        <h1>horse</h1>
        <h1>horse</h1>
        <h1>horse</h1>
        <h1>horse</h1>
    </div>
    <div class="content-right">
        <div class="news">
            <p>header next to side navbar</p>
        </div>
        <div class="user-content">
            <p>
                blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
                blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
                blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
                blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...

            </p>
        </div>
    </div>
</div> 

css

    .wrapper {
      display: flex;
      position: relative;
    }

    .wrapper .side-navbar {
      position: fixed;
      width: 200px;
      height: 97%;
      background: antiquewhite;
      padding: 30px 0;
      top: 5;
    }

    .wrapper .content-right {
      width: 100%;
      margin-left: 210px;
    }

    .wrapper .content-right .news {
      padding: 130px;
      background: red;
      position: fixed;
      width: 80%;
    }

    .wrapper .content-right .user-content {
      padding: 20px;
      background: red;
      margin-top: 300px;
      width: 100%;
      position: absolute;
      overflow: auto;
    }

这个想法是让div在单个块中向下，以便它有一个像边栏一样的下边距，并且该div向下滚动

Answer 1

Display grid使这样的布局容易得多。对于此布局，flexbox也可以工作（并具有更好的支持），但是概念是相同的-使用更简单的布局。

[我在这里所做的就是通过删除div.content-right，使用网格并使用简单的重置（删除margin，padding，然后更改box model to use the more intuitive border-box）来简化布局。我使用了完整的（且冗长的）网格规则，以帮助简化它们（有更短的版本）。我不完全确定每个区域内的样式应该是什么，因此我大多将它们放在一个单独的位置（通过使用网格布局删除不必要的样式）。

堆栈溢出讨厌box model修复程序。 border-box

border-box

Codepen shows it correctly.

布局是CSS中最基本的但仍然令人沮丧的东西之一。学习如何使它们尽可能简单要走很长的路。