css上部分固定不动下部分滚动

现在的网站多数都采用了响应式设计，使得网站能够在不同尺寸的设备上以最佳的方式展示。在移动设备上，我们通常会使用滚动来查看网页上的内容。但是，如果网页上有一部分内容需要始终保留在页面顶部，该怎么办呢？下面就是方法。

我们可以利用CSS来解决这个问题。通过设置固定定位和滚动定位两个层次，我们可以创建一个上部分不动，下部分滚动的页面。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;
}

.content {
  padding-top: 100px; /* 留出顶部固定的位置 */
  overflow-y: scroll; /* 确保内容可滚动 */
  height: calc(100% - 100px); /* 确保滚动区域占据剩下的高度 */
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
} 

如上所示，我们首先将html和body元素的高度设为100%。接着，通过设置.header的position为fixed，使其始终保持在顶部。然后通过在.content元素上设置padding-top，确保页面的其余内容不会覆盖在.header上面。同时为了让.content可以滚动，我们还要为其设置overflow-y:scroll。最后，在.footer元素上设置position为fixed，并且将bottom属性设为0，让其留在页面底部。