如何保持网页的一部分固定？

Question

我正在创建一个网页，其中包含一些内容，该内容分为两个方面：左侧和右侧。右侧包含各种形式，需要滚动，而左侧仅包含图像和一些按钮/复选框，并且需要保持固定。因此，左侧本身无法滚动，但是当我滚动右侧时，左侧保持固定，并且无论是在页面顶部还是底部，我仍然可以看到其内容。

我想实现的数字如下： 在上图中，您可以看到我的主页。右边的内容是可滚动的，滚动时左边的内容保持固定。在页面底部，我仍然可以看到左侧的内容，如下图所示： 有什么办法可以实现？我正在使用Angular和Bootstrap开发，但同时也在使用自定义CSS。

Answer 1

您可以使用flexbox / css网格或引导网格来绘制基本布局，并可以使用代码

.left-container{
   position: fixed;
   top: 0; 
   right: 0;
}

为了更好地理解，请仔细检查css的位置属性

如果将固定位置放在左div上后，如果右面板变形了，可以执行以下操作：

 .side-bar{
    width: 20%;
    height: 550px;
    border-right: 2px solid black;
    position: fixed;
}

.main{
    width: 80%;
    height: 550px;
    margin-left: 20%;
}

将main / right div的左边距设置为左侧面板的宽度，就像我将侧面板的宽度为20％一样，因此我将main div的左边距设置为20％

Answer 2

尝试一下：

HTML

<div class="image-container">
  //add your html code here
</div>

CSS

.image-container {
   position: fixed;
   top: 0; 
   right: 0;
   display: block;
 }

Answer 3

要修复容器，请使用position:fixed

here是我所做的一个项目，该项目在左侧具有固定位置。