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%;
}

这样，您可以确保在其他内容固定的同时可以滚动右列。右列将使他的高度适应行的高度，因此，如果要更改高度，只需更改行的高度（现在由左列确定）

Answer 2

使用Bootstrap的 position:fixed 使左侧col-2 position-fixed，然后在{{1}上使用 offset-2 }使其保持在正确的位置...

col-10

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

类似的问题：

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

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

2 个答案: