如何固定网页的一部分？答案

【问题标题】：How to keep fixed a portion of a web page?如何固定网页的一部分？
【发布时间】：2019-06-28 16:26:35
【问题描述】：

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

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

【问题讨论】：

您是说您在自己的研究中找不到任何关于如此多网站使用的主题/技术的内容吗？
@04FS 如果我在这里写一个问题，不，我没有，你不觉得吗？似乎网络上的主要人希望将内容粘贴到他们页面的某些部分，但在我的情况下，我希望当您滚动右侧时左侧始终可见。
所以，然后将其固定，或者仅将溢出应用到右侧......除了新技术之外的所有内容。
@04FS 将问题标记为另一个问题的副本（如果你能找到的话）或建议一个答案会比无用的讽刺更好。

标签： html css twitter-bootstrap angular-ui-bootstrap

【解决方案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%;
}

将主/右 div 的左侧边距放置到左侧面板的宽度，就像我将侧面板的宽度设置为 20%，所以我将主 div 的左侧边距放置到 20%

【讨论】：

position: fixed 确实是我想要的，但就我而言，当我粘贴内容时，布局会混乱。
这是因为一旦你固定了一个元素的位置，它就会移出正常的文档流，所以空间可以被其他元素填充
哦，我明白了，但是如果我不想要这种行为并且我想粘贴一个元素并使空间不可用，那么——例如——保持我设计的样式怎么办？
你可以这样做 then.side-bar{ width: 20%;高度：550px；右边框：2px 纯黑色；位置：固定； } .main{ 宽度：80%;高度：550px；左边距：20%； }，我已经更新了我的答案，请尝试一下，它对我有用

【解决方案2】：

试试这个：

HTML

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

CSS

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

【讨论】：

【解决方案3】：

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

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

【讨论】：