如何固定网页的一部分？

Question

我正在创建一个包含一些内容的网页，该网页分为两个部分：左侧和右侧。右侧包含各种形式，需要滚动，左侧只包含一个图像和一些 buttons/checkbox 并且需要保持固定。因此左侧本身不能滚动，但是当我滚动右侧时，左侧保持不动，无论我在页面的顶部还是底部，我仍然可以看到它的内容。

在数字上，我想要实现的是如下所示：在上图中你可以看到我的主页。右边的内容是可滚动的，当你滚动它时，左边的内容保持不变。在页面底部，我仍然可以看到左侧内容，如下图所示：有什么办法可以做到这一点？我正在使用 Angular 和 Bootstrap 进行开发，但我也在使用自定义 CSS.

Answer 1

试试这个：

HTML

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

CSS

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

Answer 2

绘制基本布局可以使用flexbox/css网格或bootstrap网格，也可以使用代码

.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 margin-left div到 20%

Answer 3

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

here是我做的项目，左边有固定的位置。

如何固定网页的一部分？

How to keep fixed a portion of a web page?

html

css

twitter-bootstrap

angular-ui-bootstrap