如何修复网页上的某些 html 元素同时使其他元素可滚动答案

【问题标题】：How to fix some html elements on webpage whilst making others scrollable如何修复网页上的某些 html 元素同时使其他元素可滚动
【发布时间】：2019-02-08 07:10:09
【问题描述】：

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

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

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

这里是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;
}

那么如何实现呢？

【问题讨论】：

嗨，如果我没看错你的东西，你需要使用 z-index
z-index: -1;它基本上说明了什么 div 或 item 应该在上面或下面
codepen.io/Garth13/pen/NLjxEm 以此为参考

标签： html css bootstrap-4

【解决方案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" 类只是为了确保它填满所有可用空间：

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

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

【讨论】：

【解决方案2】：

使用 Bootstrap 的 position-fixed 使左侧 col-2 position:fixed，然后在 col-10 上使用 offset-2 将其保留在右侧。 ..

<nav class="navbar navbar-expand-lg navbar-light bg-cream-shade" id="bootstrap-override-navbar">
    Some nav setup
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-2 position-fixed">
            <div class="card" id="bootstrap-override-card">
                ...
            </div>
        </div>
        <div class="col-10 bg-white offset-2">
            <!--Some Content-->

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

演示：https://www.codeply.com/go/5yFRtzwJvZ

类似问题：

How to create a fixed sidebar layout with Bootstrap 4?
Fixed and scrollable column in Bootstrap 4 flexbox

【讨论】：