html - 如何修复网页上的一些 html 元素，同时使其他元素可滚动

Question

基本上，该页面有一个导航栏，后面跟着一行包含两列的内容。在左侧栏中显示用户个人资料信息(个人资料图片、个人简介等)，在右侧栏中显示一些其他信息。

当我尝试滚动页面时，导航栏下方的引导卡似乎在导航栏上滚动。

我希望导航栏和左侧列在页面滚动时保持固定，但右侧列可以滚动。

这是html页面..

<nav class="navbar navbar-expand-lg navbar-light bg-cream-shade" id='bootstrap-override-navbar'>
  Some nav setup
</nav>
<!--here starts the problem-->
<div class="card bg-cream">
  <div class="row">
    <div class="col-2">
      <div class="card" id='bootstrap-override-card'>
        <div>
          <img src=".." alt="Generic placeholder image"/>
        </div>
        <div class="media">
          <div class="media-body">
            <h5>Chanakya Sunkarapally</h5>
          </div>
        </div>
        <p class="card-text"><small>Some quick info about me. </small></p>
        <div class="list-group list-group-flush">
          <!--list of stuff-->
        </div>
        <div class="card-body">
          Some info
        </div>
      </div>
    </div>
    <div class="col-10 bg-white">
      <!--Some Content-->
    </div>
  </div>
</div>

这是页面的 css..

#bootstrap-override-card {
background: linear-gradient(to bottom, #ffffe1, #fffff4);
border: none;
/* position: sticky;*/
padding: unset;
top: auto;
position: sticky;
}
.bg-cream{
background:  #fffff4;
}
.bg-cream-shade {
background: linear-gradient(to right, #ffffe1, #fffff4);
}
#bootstrap-override-navbar {
position: sticky;
top: 0;
}

那么如何实现呢？

Answer 1

您可以在右列 div 中使用 html 对象:

<div class="col-10 bg-white">
    <object class="right-column" type="text/html" data="your_file_path.html" ></object>
</div>

“右列”类只是为了确保它填充所有可用空间:

.right-column {
    width: 100%;
    height: 100%;
}

这样您就可以确保在其他内容固定的情况下可以滚动右侧的列。 右列会根据行高调整他的高度，所以如果你想改变高度只需改变行的高度(现在由左列决定)