时间戳

首页 > 解决方案 > 如何固定网页的一部分？

html - 如何固定网页的一部分？

问题描述

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

在图中，我想要实现的是如下所示： 在此处输入图像描述 在上图中，您可以看到我的主页。右边的内容是可滚动的，当你滚动它时，左边的内容保持不变。在页面底部我仍然可以看到左侧的内容，如下图所示： 在此处输入图像描述 有什么方法可以实现吗？我正在使用 Angular 和 Bootstrap 进行开发，但我也在使用自定义 CSS。

标签： htmlcsstwitter-bootstrapangular-ui-bootstrap

解决方案

您可以使用 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%

推荐阅读